微信小程序开发之——动画-Animation(3)

最新推荐文章于 2024-09-25 14:47:29 发布

PGzxc

最新推荐文章于 2024-09-25 14:47:29 发布

阅读量3.6k

点赞数 1

分类专栏：微信小程序文章标签：动画小程序微信

本文链接：https://blog.csdn.net/Calvin_zhou/article/details/120570145

版权

微信小程序专栏收录该内容

99 篇文章

订阅专栏

本文详细介绍了微信小程序中使用wx.createAnimation进行动画操作的方法，包括如何创建动画实例、设置参数、执行动画动作及导出动画队列。重点讲解了透明度、旋转、缩放等动画常见动作，并提供了一个实际的图片旋转动画示例，帮助开发者更好地理解和应用小程序动画功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一概述

wx.createAnimation创建Animation动画实例
wx.createAnimation时，参数的常用属性
动画常见动作
动画执行完成之后导出动画队列(export)

二 wx.createAnimation创建Animation动画实例

2.1 默认的

this.animation = wx.createAnimation()

2.2 自己指定参数

this.animation=wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease'
    })

2.3 说明(this.animation)

this.animation：布局文件中，需要执行动画操作的对象

三 wx.createAnimation时，参数的常用属性

属性	类型	说明
duration	number	动画持续时间，单位 ms
timingFunction	string	动画的效果
delay	number	动画延迟时间，单位 ms
transformOrigin	string

timingFunction(动画效果)

属性	说明
‘linear’	动画从头到尾的速度是相同的
‘ease’	动画以低速开始，然后加快，在结束前变慢
‘ease-in’	动画以低速开始
‘ease-in-out’	动画以低速开始和结束
‘ease-out’	动画以低速结束
‘step-start’	动画第一帧就跳至结束状态直到结束
‘step-end’	动画一直保持开始状态，最后一帧跳到结束状态

四动画常见动作

Animation.opacity：透明动画
Animation.rotate：选择动画
Animation.scale：缩放动画
Animation.skew：倾斜动画
Animation.translate：平移动画

五动画执行过程

this.animation = wx.createAnimation()：执行动画赋值
动画动作(透明、旋转、缩放等)
this.animation…step()：表示一组动画完成
this.animation.export()：导出动画队列。export 方法每次调用后会清掉之前的动画操作

六示例

6.1 布局文件(index.wxml)

<view class="anim-pic">
<image src="/images/rocket.png" animation="{{animated}}"></image>
</view>
<view class="anim-btns">
  <button bindtap="rotate">旋转</button>
</view>

6.2 样式文件(index.wxss)

.anim-pic {
  width: 300rpx;
  height: 300rpx;
  margin: 40rpx auto;
}
.anim-pic image{
  width: 300rpx;
  height: 300rpx;
}
.anim-btns button{
  border: 1px solid orange;
}

6.3 逻辑文件(index.js)

Page({
  onReady: function () {
    this.animated=wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease'
    })
  },
  rotate: function () {
    this.animated.rotate(Math.random()*720-360).step()
    this.setData({
      animated:this.animated.export()
    })
  }
})