动画

my.createAnimation

创建动画实例 animation。调用实例的方法来描述动画,最后通过动画实例的export方法将动画数据导出并传递给组件的animation属性。

注意: export 方法调用后会清掉之前的动画操作

扫码体验:

img.jpg

入参

参数类型必填说明
durationInteger动画的持续时间,单位 ms,默认值 400
timeFunctionString定义动画的效果,默认值"linear",有效值:"linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
delayInteger动画延迟时间,单位 ms,默认值 0
transformOriginString设置transform-origin,默认值 "50% 50% 0"
  1. const animation = my.createAnimation({
  2. transformOrigin: "top right",
  3. duration: 3000,
  4. timeFunction: "ease-in-out",
  5. delay: 100,
  6. })

animation

动画实例可以调用以下方法来描述动画,调用结束后会返回实例本身,支持链式调用的写法。

样式:

方法参数说明
opacityvalue透明度,参数范围 0~1
backgroundColorcolor颜色值
widthlength长度值,如果传入数字则默认单位为 px ,可传入其他自定义单位的长度值
heightlength同上
toplength同上
leftlength同上
bottomlength同上
rightlength同上

旋转:

方法参数说明
rotatedegdeg 范围 -180 ~ 180,从原点顺时针旋转一个 deg 角度
rotateXdegdeg 范围 -180 ~ 180,在 X 轴旋转一个 deg 角度
rotateYdegdeg 范围 -180 ~ 180,在 Y 轴旋转一个 deg 角度
rotateZdegdeg 范围 -180 ~ 180,在 Z 轴旋转一个deg角度
rotate3d(x, y , z, deg)transform-function rotate3d

缩放:

方法参数说明
scalesx,[sy]只有一个参数时,表示在 X 轴、Y 轴同时缩放 sx 倍;两个参数时表示在 X 轴缩放 sx 倍,在 Y 轴缩放 sy 倍
scaleXsx在 X 轴缩放 sx 倍
scaleYsy在 Y 轴缩放 sy 倍
scaleZsz在 Z 轴缩放 sy 倍
scale3d(sx,sy,sz)在 X 轴缩放 sx 倍,在 Y 轴缩放sy 倍,在 Z 轴缩放 sz 倍

偏移:

方法参数说明
translatetx,[ty]只有一个参数时,表示在 X 轴偏移 tx;两个参数时,表示在 X 轴偏移 tx,在 Y 轴偏移 ty,单位均为 px。
translateXtx在 X 轴偏移 tx,单位 px
translateYty在 Y 轴偏移 tx,单位 px
translateZtz在 Z 轴偏移 tx,单位 px
translate3d(tx,ty,tz)在 X 轴偏移 tx,在 Y 轴偏移t y,在Z轴偏移 tz,单位 px

倾斜:

方法参数说明
skewax,[ay]参数范围 -180 ~ 180。只有一个参数时,Y 轴坐标不变,X 轴坐标延顺时针倾斜 ax 度;两个参数时,分别在 X 轴倾斜 ax 度,在 Y 轴倾斜 ay 度
skewXax参数范围 -180 ~ 180。Y 轴坐标不变,X 轴坐标延顺时针倾斜 ax度
skewYay参数范围 -180~180。X 轴坐标不变,Y 轴坐标延顺时针倾斜 ay 度

矩阵变形:

方法参数说明
matrix(a,b,c,d,tx,ty)同transform-function
matrix3d同transform-function matrix3d

动画队列

调用动画操作方法后需要要调用 step() 来表示一组动画完成,在一组动画中可以调用任意多个动画方法,一组动画中的所有动画会同时开始,当一组动画完成后才会进行下一组动画。step() 可以传入一个跟 my.createAnimation() 一样的配置参数用于指定当前组动画的配置。

代码示例

  1. <view animation="{{animationInfo}}" style="background:yellow;height:100rpx;width:100rpx"></view>
  1. Page({
  2. data: {
  3. animationInfo: {}
  4. },
  5. onShow(){
  6. var animation = my.createAnimation({
  7. duration: 1000,
  8. timeFunction: 'ease-in-out',
  9. });
  10. this.animation = animation;
  11. animation.scale(3,3).rotate(60).step();
  12. this.setData({
  13. animationInfo:animation.export()
  14. });
  15. setTimeout(function() {
  16. animation.translate(35).step();
  17. this.setData({
  18. animationInfo:animation.export(),
  19. });
  20. }.bind(this), 1500);
  21. },
  22. rotateAndScale () {
  23. // 旋转同时放大
  24. this.animation.rotate(60).scale(3, 3).step();
  25. this.setData({
  26. animationInfo: this.animation.export(),
  27. });
  28. },
  29. rotateThenScale () {
  30. // 先旋转后放大
  31. this.animation.rotate(60).step();
  32. this.animation.scale(3, 3).step();
  33. this.setData({
  34. animationInfo: this.animation.export(),
  35. });
  36. },
  37. rotateAndScaleThenTranslate () {
  38. // 先旋转同时放大,然后平移
  39. this.animation.rotate(60).scale(3, 3).step();
  40. this.animation.translate(100, 100).step({ duration: 2000 });
  41. this.setData({
  42. animationInfo: this.animation.export()
  43. });
  44. }
  45. })

原文: https://docs.alipay.com/mini/api/ui-animation