top

How To Use Animation With CAPH WUI Widgets

Published 2014-10-28 | (Compatible with SDK 5.0,5.1 and 2013,2014 models)

This file will give some descriptions for using animation with caph.wui widget

Overview

This file will give some descriptions for using animation with caph.wui widget.

Prerequisites

To introduce use animation with caph.wui widget, take animation widget for example, you should include caph.wui dependencies, basic widget of UI, the base style of UI, animation app source files in your application by putting the following code in the <head> and <body> sections of animation.html, just as follows:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>caph.wui animation samples</title>

    <!-- load caph-level1-unified.min.js -->
    <script src="$CAPH/1.0.0/caph-level1-unified.min.js" type="text/javascript"></script>

    <!-- load the app -->
    <script src="animation.js"></script>
</head>

<body onload="app.run();">
    <div class="caph-ui-thumbnail caph-rounded caph-highlighted"  id="button01"><img src= "res/11.jpg"/></div>
    <div class="caph-ui-arrow caph-large caph-right caph-highlighted"  id="button02"></div>
</body>

Source files mentioned above are explained in the following table.

File Description
caph-level1-unified.min.js It is include all kinds of is basic widget of UI will be used. It includes external libraries also.
animation.js The animation application source file.

Environment

Use Samsung Smart TV SDK and caph.wui to create applications that run on a TV screen, you need: Samsung TV connected to the Internet, SDK or a text editor for creating HTML, JavaScript and CSS files. You can also use the emulator provided with the SDK to debug and test the applications before uploading them in your TV.

Source File

The files needed for the sample application are here.

How to Develop

  • First we should add some widgets, including box and domContainer in order to do the animation operations, source codes as follows. In this, example we use some widgets: view, UIContext, box and so on, so we should import these source files at the beginning of the file, then define some options about some widgets, new some widget objects, initialize some parameters and last render these objects on the UIContext, in order to show on the screen.

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    
    /**
     * box sample
     */
    var app = app || {};
    
    app.run = function() {
        caph._setBasePath('../$CAPH');
        app.handleLoad();
        
        var UIContext = caph.wui.widget.UIContext;
        var Box = caph.wui.widget.Box;
        var DomContainer = caph.wui.widget.DomContainer;
        var TransferAnimation = caph.wui.ani.TransferAnimation;
        var BounceAnimation = caph.wui.ani.BounceAnimation;
        var ScaleAnimation = caph.wui.ani.ScaleAnimation;
        var RotateAnimation = caph.wui.ani.RotateAnimation;
        var FadeAnimation = caph.wui.ani.FadeAnimation;
        var AniLoader = caph.wui.ani.AniLoader;
    
        var info = { 'x': 600, 'y': 500, 'z': 0, width: 200, height: 200 };
        var position1 = { 'x': 900, 'y': 400, 'z': 1 };
        var position2 = { 'x': 1200, 'y': 400, 'z': 1 };
    
        var uiContext = new UIContext();
        var widget = new Box();
    
        widget.setSize(info.width, info.height);
        widget.setPosition(info.x, info.y, info.z);
        widget.addCls('boxcls');
        widget.render(uiContext);
    
        var container1 = new DomContainer();
        var target1 = document.getElementById('button01');
        container1.setPosition(position1.x, position1.y, position1.z);
    
        var container2 = new DomContainer();
        var target2 = document.getElementById('button02');
        container2.setPosition(position2.x, position2.y, position2.z);
    
        container1.render(uiContext);
        container1.appendChild(target1);
    
        container2.render(uiContext);
        container2.appendChild(target2);
    
        uiContext.show();
    

    The codes explain as follows:

    Lines 10-19 Import the widgets will be used, including view, UIContext, box, domcontainer and some kinds of animation. View is the base class for all many other caph.wui widgets. UIContext widget is the root canvas, in order to render object on it. Box is a widget with rectangle region and background color. It is the base class for Image, GridWidget, ColorTag, Panel, Label, ListWidget widgets. DomContainer is a container of DOM elements.
    Lines 25-26 New the UIContext and box object. UIContext is a canvas, all the caph.wui widgets should be rendered on it. Box is an caph.wui widget.
    Lines 28-31 Set the box position. If you don’t do this the box will display on the top left corner of your screen. Set the box CSS style, width and height, size and render box object to UIContext.
    Lines 33-45 Add two buttons to domContainer using HTML elements. Render two domContainer objects to UIContext.
    Line 47 Show the UIContext, and then the objects will be show on your screen.
  • Second give some animation operations to the above widgets, start the animations, special steps include define the options for all kinds of animation, new the animations object, give the kind of animation to some widgets, add the animations to AniLoader object, and start the animation, source codes as follows:

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    var loader = new AniLoader();
    
    var fade = new FadeAnimation();
    var fadeOpt = {opacity: 0.2, duration: 2000};
    fade.add(widget, fadeOpt);
    
    var transfer = new TransferAnimation();
    var transferOpt = {x: 260, y: 480, duration: 2000};
    transfer.add(widget, transferOpt);
    
    var rotate = new RotateAnimation();
    var rotateOpt = {y: 0.64, duration: 2000};
    rotate.add(widget, rotateOpt);
    
    var scale = new ScaleAnimation();
    var scaleOpt = {x: 2, y: 2, duration: 2000};
    scale.add(widget, scaleOpt);
    
    var bounce = new BounceAnimation();
    var bounceOpt = {direction:'up', times: 10, duration:2000, distance: 100};
    bounce.add(widget, bounceOpt);
    
    loader.add([rotate, transfer, scale, fade, bounce]);
    loader.addStateListener(function(state) {
    
    });
    loader.start(uiContext);
    

    The codes explain as follows:

    Lines 1-21 New the animation load object and some animation operations include fade, transfer, rotate, scale and bounce and include animation options. AniLoader is a container, which can load a serial of different type of animations into it, start them at appointed time. A loader could load multi animations at same time.
    Lines 23-24 Add the above animation operations to the animation load object and listen the state of animations.
    Line 27 Start the animations on UIContext. The effect of animations will be displayed on the UIContext.
  • Above animation types mentioned, including fade, transfer, rotate, scale and bounce, in each option of them, they can include Linear.None, Quadratic.In, Quadratic.Out, Quadratic.InOut, Cubic.In, Cubic.Out, Cubic.InOut, Quartic.In, Quartic.Out, Quartic.InOut, Quintic.In, Quintic.Out, Quintic.InOut, Sinusoidal.In, Sinusoidal.Out, Sinusoidal.InOut, Exponential.In, Exponential.Out, Exponential.InOut, Circular.In, Circular.Out, Circular.InOut, Elastic.In, Elastic.Out, Elastic.InOut, Back.In, Back.Out, Back.InOut, Bounce.In, Bounce.Out, Bounce.InOut animation ease options, the graphs of ease option just as follows:

  • The example picture is the result about some widgets finish animation shows on your screen is like: