E企盈营销工具技术服务商 热线:4006-838-530

小程序开发API之动画Animation

E企盈直播平台营销卖货系统

效果展示wx.createAnimation(Object object)创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。wx.createAnimation参数timingFunction 的合法值### transform-origin属性允许您改变被转换元素的位置。transform-origin: x-axis y-axis z-axis;其中x-axis  定义视图被置于 X 轴的何处。可能的值:left、center、 right、length、%y-axis       定义视图被置于 Y 轴的何处。可能的值: top、center、bottom、 length、%z-axis  定义视图被置于 Z 轴的何处。可能的值:length返回值AnimationAnimation动画对象Animation方法动画方法样式:旋转:缩放:偏移:倾斜:矩阵变形:Array.<Object> Animation.export()导出动画队列。export 方法每次调用后会清掉之前的动画操作。返回值Array.animationDataAnimation.step(Object object)表示一组动画完成。可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。参数** timingFunction 的合法值 **返回值animationAnimation.backgroundColor(string value)设置背景色参数string value    颜色值返回值AnimationAnimation.bottom(number|string value)设置 bottom 值参数string value 长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值返回值AnimationAnimation.height(number|string value)设置高度参数string value  长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值返回值AnimationAnimation.left(number|string value)设置 left 值参数string value  长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值返回值AnimationAnimation.opacity(number value)设置透明度参数number value    透明度,范围 0-1返回值AnimationAnimation.right(number|string value)设置 right 值参数string value   长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值返回值AnimationAnimation.rotate(number angle)从原点顺时针旋转一个角度参数number angle 旋转的角度。范围 [-180, 180]返回值AnimationAnimation.rotate3d(number x, number y, number z, number angle)从 X 轴顺时针旋转一个角度参数number x  旋转轴的 x 坐标number y  旋转轴的 y 坐标number z  旋转轴的 z 坐标number angle  旋转的角度。范围 [-180, 180]返回值AnimationAnimation.rotateX(number angle)从 X 轴顺时针旋转一个角度参数number angle  旋转的角度。范围 [-180, 180]返回值AnimationAnimation.rotateY(number angle)从 Y 轴顺时针旋转一个角度参数number angle  旋转的角度。范围 [-180, 180]返回值AnimationAnimation.rotateZ(number angle)从 Z 轴顺时针旋转一个角度参数number angle  旋转的角度。范围 [-180, 180]返回值AnimationAnimation.scale(number sx, number sy)缩放参数number sx   当仅有 sx 参数时,表示在 X 轴、Y 轴同时缩放sx倍数number sy   在 Y 轴缩放 sy 倍数返回值AnimationAnimation.scale3d(number sx, number sy, number sz)缩放参数number sx   x 轴的缩放倍数number sy   y 轴的缩放倍数number sz   z 轴的缩放倍数返回值AnimationAnimation.scaleX(number scale)缩放 X 轴参数number scale  X 轴的缩放倍数返回值AnimationAnimation.scaleY(number scale)缩放 Y 轴参数number scale   Y 轴的缩放倍数返回值AnimationAnimation.scaleZ(number scale)缩放 Z 轴参数number scale   Z 轴的缩放倍数返回值AnimationAnimation.skew(number ax, number ay)对 X、Y 轴坐标进行倾斜参数number ax   对 X 轴坐标倾斜的角度,范围 [-180, 180]number ay  对 Y 轴坐标倾斜的角度,范围 [-180, 180]返回值AnimationAnimation.skewX(number angle)对 X 轴坐标进行倾斜参数number angle  倾斜的角度,范围 [-180, 180]返回值AnimationAnimation.skewY(number angle)对 Y 轴坐标进行倾斜参数number angle  倾斜的角度,范围 [-180, 180]返回值AnimationAnimation.top(number|string value)设置 top 值参数number|string value   长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值返回值AnimationAnimation.translate(number tx, number ty)平移变换参数number tx   当仅有该参数时表示在 X 轴偏移 tx,单位 pxnumber ty   在 Y 轴平移的距离,单位为 px返回值AnimationAnimation.translate3d(number tx, number ty, number tz)对 xyz 坐标进行平移变换参数number tx  在 X 轴平移的距离,单位为 pxnumber ty  在 Y 轴平移的距离,单位为 pxnumber tz  在 Z 轴平移的距离,单位为 px返回值AnimationAnimation.translateX(number translation)对 X 轴平移参数number translation   在 X 轴平移的距离,单位为 px返回值AnimationAnimation.translateY(number translation)对 Y 轴平移参数number translation   在 Y 轴平移的距离,单位为 px返回值AnimationAnimation.translateZ(number translation)对 Z 轴平移参数number translation   在 Z 轴平移的距离,单位为 px返回值AnimationAnimation.width(number|string value)设置宽度参数number|string value   长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值返回值AnimationAnimation.matrix()同 transform-function matrix返回值Animation注: CSS数据类型用于对元素的显示做变换。通常,这种变换可以由矩阵表示,并且可以使用每个点上的矩阵乘法来确定所得到的图像。CSS 函数 matrix() 用六个指定的值来指定一个均匀的二维(2D)变换矩阵。这个矩形中的常量值是不作为参数进行传递的,其他的参数则在主要列的顺序中描述。matrix(a, b, c, d, tx, ty)其中a b c d  以  的格式来描述线性变换tx ty  以  的格式来描述变换的量Animation.matrix3d()同 transform-function matrix3dCSS 函数 matrix3d() 用一个 4 × 4 的齐次矩阵来描述一个三维(3D)变换。16个参数都在主要列的顺序中描述。matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)其中a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 d4 以  的格式来描述线性变换a4 b4 c4  以  的格式来描述变换的量示例:效果展示代码index.wxml<view class=”container”>  <view animation=”{{animation}}” class=”view”>———-</view></view><button bindtap=’btnClick1′ type=”primary”>动画</button>index.wxssbutton{  margin: 20rpx}index.js/*  duration:400  动画持续时间,单位 ms  timingFunction:’linear’  动画的效果  delay:0    动画延迟时间,单位 ms  transformOrigin:’50% 50% 0′ 属性允许您改变被转换元素的位置。  transform-origin: x-axis y-axis z-axis;    x-axis   定义视图被置于 X 轴的何处。可能的值:left、center、 right、length、%    y-axis       定义视图被置于 Y 轴的何处。可能的值: top、center、bottom、 length、%    z-axis   定义视图被置于 Z 轴的何处。可能的值:length*/Page({  data: {    animation:”  },  /**   * 生命周期函数–监听页面加载   */  onLoad: function (options) {      },  /**   * 生命周期函数–监听页面初次渲染完成   */  onReady: function () {    //实例化一个动画     this.animation = wx.createAnimation({      duration:1500,                 //动画持续时间,单位 ms      timingFunction: ‘linear’,     //动画的效果      delay: 100,                   //动画延迟时间      transformOrigin: ‘center center 0’,//属性允许您改变被转换元素的位置。    })   },  btnClick1: function (options) {    //设置背景色为红色,透明度为0.1    this.animation.backgroundColor(‘red’).step({      duration: 5000,                 //动画持续时间,单位 ms      timingFunction: ‘linear’,     //动画的效果      delay: 100,                   //动画延迟时间      transformOrigin: ‘center center 0’,//属性允许您改变被转换元素的位置。    })    this.animation.opacity(0.5).step({})    //旋转180    this.animation.rotate(180).step({})    //从 X 轴顺时针旋转一个角度    this.animation.rotateX(180).step({})    //从 Y 轴顺时针旋转一个角度    this.animation.rotateY(180).step({})    //从 Z 轴顺时针旋转一个角度    this.animation.rotateZ(180).step({})    //缩放    this.animation.scale(1.5,1.5).step({})    //对 xyz 坐标进行平移变换    this.animation.translate3d(0, -200, 0).step({      duration: 5000,                 //动画持续时间,单位 ms      timingFunction: ‘linear’,     //动画的效果      delay: 100,                   //动画延迟时间      transformOrigin: ‘center center 0’,//属性允许您改变被转换元素的位置。    })    this.animation.translate3d(50, 50, 0).step({})    this.setData({      //输出动画      animation: this.animation.export()    })  }})微信小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序开发API之动画Animation
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏