Animating layers 动态化层

Animating layers 动态化层

jCanvas provides an animateLayer() method for animating the properties of a jCanvas layer.
jcanvas提供了一个animateLayer()方法来使jCanvas层的属性可以动态化。
The animateLayer() method accepts up to five arguments:
animateLayer()方法接收最多五个参数：
1.The index or name of the layer to be animated. The layer object itself is also an acceptable value.
要动态化的层的索引或名字，层对象本身也是可以接收的值。
2.An object containing the properties to animate and their end values
一个包含了要动态化的属性及其最终值的对象。
3.The duration of the animation in milliseconds (optional; defaults to 400)
动画耗时，以毫秒计（可选，默认为400）
4.The easing of the animation (optional; defaults to 'swing')
动画的缓冲效果（可选，默认为swing）
5.A callback function that runs when the animation completes (optional). It accepts the following arguments:

• The percentage of the animation which has completed (as a value from 0 to 1).
• A jQuery.fx object containing properties related to the animation.
• The layer being animated.
  当动画完成时运行的回调函数（可选）。它接收下边的参数：
• 已完成了的动画的百分比（值从0到1）；
• 一个jQuery.fx对象，它包含了相关动画的属性；
• 动画中的层。

// Create and draw a rectangle layer 创建并绘制一个矩形的层 
$('canvas').drawRect({
  layer: true,
  name: 'myBox',
  fillStyle: '#36c',
  x: 50, y: 50,
  width: 1, height: 1
});

// Animate layer properties 动态化层的属性
$('canvas')
.animateLayer('myBox', {
  x: 150, y: 150,
  width: 100, height: 50
}, 1000, function(layer) {
  // Callback function 回调函数
  $(this).animateLayer(layer, {
    fillStyle: 'rgb(204, 51, 51)',
    x: 250, y: 100,
    rotate: 360
  }, 'slow', 'swing');
});

jCanvas can animate numeric values, as well as colors (hex, RGB, or color names). jCanvas also enables jQuery to utilize this color animation for HTML elements.
jCanvas可以动态化数字型值，及颜色（hex，rgb或颜色名），jCanvas也启用了jQuery来在HTML元素上使用色彩动画。（也就是不用再包含jq.color.js了）
Additionally, you may use the string '+=' or '-=' to animate a property from the current value.
再有，你可以使用字符串+=或-=来从当前值动态化一个属性。

$('canvas').animateLayer(0, {
  rotate: '+=360',
  x: '-=50'
});

Functions as Property Values 作为属性值的函数

You can also use a callback function . Whatever the function returns will be used as the end-value to which that property will be animated.
你也可以使用一个回调函数，而函数的返回值会被作为要动态化的属性的最终值来使用。
As always, the value of this in your callback function is the canvas DOM element.
还是那样，你回调函数的this指针的值就是画布的DOM元素

$('canvas').animateLayer('myLayer', {
  x: function(layer) {
    return Math.pow(layer.x, 2);
  }
});

This capability is especially useful when using the below animateLayerGroup() method, in which you may not have direct access to each layer in the group. Now, such direct access to these layers is possible.
这个特性在使用下边的animateLayerGroup()方法尤其有用。在这个方法中，你不能直接访问组内的每个层。现在，这种对这些层的直接访问，也变得可能了。

Animating layer groups 动态化层分组

You can also animate all layers in a layer group using the animateLayerGroup() method.
你也可以使用animateLayerGroup()方法来使一个层分组中的所有层动态化。
The method accepts the same basic arguments as the animateLayer() method,
本方法接收与animateLayer()方法相同的基本参数。

$('canvas')
// Draw a circle 画圆
.drawArc({
  layer: true,
  groups: ['circles'],
  fillStyle: '#c33',
  x: 100, y: 100,
  radius: 50
})
// Draw another circle 画另个圆
.drawArc({
  layer: true,
  groups: ['circles'],
  fillStyle: '#36c',
  x: 220, y: 100,
  radius: 50
})
// Animate all layers in the group 'circles' 动态画分组circles中的所有层
.animateLayerGroup('circles', {
  y: 200
}, 500);

Stopping animation 停止动画

Similar to jQuery's stop() method, you can stop any layer animation in progress by calling the stopLayer() method.
与jQuery的stop方法类似，你可以通过调用stopLayer()方法来在任意层的动画过程当中停止动画。

$('canvas').stopLayer(0);

$('canvas').stopLayer('myBox');

Additionally, you may (optionally) pass in true as a second argument, which will also remove any queued animations.
再有，你可以（可选）传入true作为第二参数，它会删除所有的已入队列的动画。

$('canvas').stopLayer('myBox', true);

You can also stop animation for all layers in a group using the stopLayerGroup() method
你也可以使用stopLayerGroup()方法来使一个组内的所有层停止动画。

$('canvas').stopLayerGroup('myGroup');

Delaying animation 延迟动画

Similar to jQuery's delay() method, you can delay any layer's animation queue by calling the delayLayer() method.
与jQuery的delay方法相似，你可以调用delayLayer()方法来延迟任意层上的动画队列。
The method accepts two arguments: the layer name/index, and the number of milliseconds to delay animation.
本方法接收两个参数：层的名称/索引，动画要延迟的毫秒数。

$('canvas').delayLayer('myBox', 500);

You can also delay animation for all layers in a group using the delayLayerGroup() method
你也可以使用delayLayerGroup()方法来使一个组内的所有层的动画延迟。

$('canvas').delayLayerGroup('myGroup', 500);

Running a function at every step 在动画每步运行一个函数

Just like jQuery, the animateLayer() method in jCanvas supports an alternate syntax for providing additional options (like a step callback).
就像jQuery那样，jCanvas中的animateLayer()方法支持一种替代语法，用来提供附加的操作（像step回调那样）

$('canvas').animateLayer('myBox', {
  x: 200
}, {
  duration: 1000,
  easing: 'swing',
  step: function (now, fx, layer) {
    // do something for each step of the animation
    // 在动画的每步做一些事情
  },
  complete: function (layer) {
    // still do something at end of animation
    // 在动作的结尾做一些事情
  }

});

Notes 注意

Multiple animateLayer() calls can be queued up rather than using multiple callback functions.
多重的animateLayer()调用是队列起来的，而不是使用多重回调函数。
The callback parameter for the animateLayerGroup() method will run when each layer in the group finishes animating.
animateLayerGroup()方法的回调参数，会在组内每个层完成动画之后执行一次。