Support animations about tabris-js

[ralfstx]

@natanraj You can animate opacity.

[mpost]

I think page turning and flip pages should not be part of a generic animations api.

After some discussion with jordi, ralf and tim we agreed that we want to animate the following properties:

• layoutData (limited in android)
• opacity
• translation
• scale
• rotation

In the protocol we use one object tabris.Animation per widget to configure the animation. It has the following properties for now:

• easing function: "easeOut"
• duration: 1000
• delay: 200
• target: o23
• properties: { see list above, ... }

In addition it the tabris.Animation has call method start and a Completion event to notify the javascript/server that the animation ended.

[mpost]

I have created an example that makes use of the discussed features. In addition i have created an experimental implementation for the android client, that can run and animate this example.

tabris.load(function() {
  var MARGIN = 12;
  var page = tabris.createPage({
    title: "Simple Animation",
    topLevel: true
  });
  var label = page.append("Label", {
    layoutData: {left: MARGIN, top: MARGIN},
    background: "#6aa",
    foreground: "white",
    text: "Hallo World"
  });
  var button = page.append("Button", {
    layoutData: {left: MARGIN, right: MARGIN, top: [label, MARGIN]},
    text: "Animate"
  });
  button.on("Selection", function() {
    tabris.create("tabris.Animation", {
      target: label,
      delay: 0,
      duration: 1000,
      repeat: 1,
      reverse: true,
      easing: "ease-out",
      properties: {
        opacity: 0.25,
        rotation: 0.75 * Math.PI,
        scaleX: 2.0,
        scaleY: 2.0,
        translationX: 100,
        translationY: 200
      }
    }).on("Completion", function() {
      this.dispose();
    }).call("start");
  });
});

[mpost]

Using the same api as shown above i have also created a more advanced example:

[mpost]

Animation protocol description

The following description outlines the current implementation of animation messages.

create {
    type: "tabris.Animation"
}
set {
  target: "w321", // the widget id of a widget to apply the animation on
  delay: 0 // start delay in ms
  duration: 1000 // animation duration in ms
  repeat: 1 // number of repeats
  reverse: true // should the animation reverse when repeating
  easing: "ease-out" // "linear", "ease-in", "ease-out", "ease-in-out
  properties: {
    opacity: 0.25 // alpha value between 0.0 (translucent) and 1.0 (fully visible)
    rotation: 0.75 * Math.PI // similar to canvas rotation
    rotationX: 0.75 * Math.PI // similar to canvas rotation
    rotationY: 0.75 * Math.PI // similar to canvas rotation
    scaleX: 2.0 // scale factor
    scaleY: 2.0 // scale factor
    translationX: 100 // translation in X direction
    translationY: 200 // translation in Y direction
  }
}
// starts the animation atomically with all the properties previously set
call { method: "start" }
// cancels a running or previously scheduled (animation with start delay) animation
call { method: "cancel" }
// callback when the animation ended normally
listen { Completion: boolean }
notify "Completion" {}
// callback when the animation starts (potentially after start delay)
listen { Start: boolean }
notify "Start" {}
// callback on each animation frame while the animation runs
listen { Progress: boolean }
notify "Progress" {}

[natanraj]

@mpost : Could we animate hide ? .animate({visible: true}, {duration: 1000}) something like this ? I am tryign this, but in vain. Reading your post now, I see only 8 attributes are supported