小程序设置动画效果

        小程序和html页面有点不同，主要是使用js来实现动画效果，因为小程序自身有提供一种方式：wx.createAnimation(OBJECT)，它创建一个动画实例 animation ，通过调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性，step()来停止动画，step() 表示一组动画完成。

我们主要用wx:createAnimation({})来设置一些参数，例如持续时间、延时、加载方式等，用export()来开启动画，在页面上调用animation=”{{动画名称}}”。具体步骤：

1）创建动画对象并设置有效参数==>wx:createAnimation({参数：有效值})

2）创建一组动画，调用step()来表示一组动画的完成==>动画对象.动画效果.step()

3）在data中设置一个对象vip_animal(自己随意命名)，用该对象开启动画==>this.setData({vip_animal: animation.export()})

4）在页面上调用动画对象==>animation="{{vip_animal}}"

例子：淡入淡出动画效果（当淡入动画生效后1.5s，淡出动画开始生效）

在wxml上调用animation="{{vip_animal}}"来显示

如果需要设置循环效果。我们可以设置：（setAnimation为）

另一种方式：

在wxml上调用style="{{style_img}}"来显示

角色动画是构建虚拟世界（游戏和虚拟社区）一个比较重要的内容。因为虚拟世界最关键的是人与虚拟角色（即“化身”，Avatar）之间的交互，会动的世界才有生机。角色动画可分两种：预定义动画（ predefined animation ）和程序动画（ procedural animation ）。预定义动画是事先由美术师制作好的动画序列，程序运行时只能播放，不能改变；程序动画是在程序运行时实时生成。相比预定义动画，程序动画能实现更好的交互。

程序动画可以用来实现物理动画( physics animation )，物理动画可以让角色根据物理规律对外界作出相应的反应动作。物理动画现在已经开始应用到3D游戏里了。比如Crytek公司的CRYENGINE 2引擎就采用了这项技术，例如角色可以根据地形的坡度来自动调整站立的身姿，如下图所示：

IK就是一种实现程序动画的方法。骨络动画分为FK（正向运动学， Forward Kinematics ）和IK（逆向运动学, Inverse Kinematics ）两种。FK这里就不细讲了，是最常用的设置动画的方法。这里主要讲一下IK，IK和FK相反，它是给定末端作用器的位置或方向，来反求各节点的位置。如下图所示：

IK主要用于程序动画中，比如跑步时人的腿根据地形进行自适应，用手拿东西，用手握扶手开门等。如下图所示：

IK计算有2种方法：解析法和迭代法。解析法速度快，但只适用于节点较少的情况；迭代法通用性强，但有时容易得到局部极小值。所以一般是这两种方法混用。IK的解的个数有多种情况：

(a) 无解                                  (b) 唯一解                      (c) 两个解                               (d) 许多解

若节点数大于2个，就会出现有许多解的情况，那么如何选择最佳解呢，对人的手和腿来说，每个关键都有约束（转动角度的范围），那么就要考虑这些解有没有满足这些约束。但是可能满足这些约束的解不止一个，这时就要选择一个最佳的，比如视觉效果最好的。一种方法是选择消耗能量最少的那个（比如手臂各关节抬得最低）。

FK可以实现比较自然的动画效果；IK可以用在程序中实时生成骨络的关键帧，这样就可以使角色根据外界环境实时的作出动作的反应，更真实。因为FK和IK各有优缺点，所以往往FK和IK混用（FK/IK blend）。

1、利用样式实现小程序动画(用法和css用法相识)

wxml 文件

<image class="aniamtion" src="../../images/page4.jfif" style="width:200rpxheight:200rpx  position:  relative"></image>

wxss文件

.aniamtion {

animation: mymove 5s infinite

/* //infinite属性是表示无限循环的意思，没有这个属性的话动画只执行一次。 */

}

@keyframes mymove {

from {

  /* left: 0px*/

/* transform: rotate(7deg) skew(50deg) translate(30rpx,30rpx)*/

transform: rotate3d(100,200,300,0deg)

}

to {

 /* left: 200px*/

/* transform: rotate(7deg) skew(5deg) translate(100rpx,100rpx)*/

transform: rotate3d(200,300,400,360deg)

}

}

2、 用小程序的API来实现动画

用wx.createAnimation(object) 来创建一个动画 -->返回一个animation对象

创建一个动画实例 animation。

onReady: function () {

this.animation = wx.createAnimation({

duration:1000,

timingFunction:'linear',

delay:100,

transformOrigin:"left top 0"

})

},

调用实例的方法来描述动画。

Animation.step() 表示一组动画的完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画

rotate(){

this.animation.rotate(150).step() //对动画进行简单的描述

this.setData({

         animation:this.animation.export()

})

},

最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。

this.animation.export() 导出动画队列。export 方法每次调用后会清掉之前的动画 *** 作

rotate(){

this.animation.rotate(150).step() //对动画进行简单的描述

this.setData({ // 在setData({}) 导出动画数据数据给组件

         animation:this.animation.export()

})

},

完整的wxml

<view class="container">

<view animation="{{animation}}" class="view">

将做动画的块

</view>

</view>

<button type="default" size="mini" bindtap="rotate">

旋转

</button>

完整的wxjs

Page({

data: {

animation:''

},

onReady: function () {

this.animation = wx.createAnimation({

duration:1000,

timingFunction:'linear',

delay:100,

transformOrigin:"left top 0"

})

},

rotate(){

this.animation.rotate(150).step().translate(100).step()

this.setData({

animation:this.animation.export()

})

}

})

3、用选择器来绑定组件来来实现组件的动画（小程序2.9.0 的库可用，版本不够会报this.animate不是一个方法）

<text>pages/index7/index7.wxml</text>

<view id="container" style="height: 100pxwidth: 100pxbackground-color: blue">

container

</view>

<view class="block" style="height: 100pxwidth: 100pxbackground-color: #ccc">

block

</view>

用选择器选择相应的组件进行相应的动画

进行关键帧的处理

onLoad: function () {

  this.animate('#container', [

    { opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' },

    { opacity: 0.5, rotate: 45, backgroundColor: '#00FF00' },

    { opacity: 1.0, rotate: 90, backgroundColor: '#FF0000' },

  ], 5000)

  this.animate('.block', [

    { scale: [1, 1], rotate: 0, ease: 'ease-out' },

    { scale: [1.5, 1.5], rotate: 45, ease: 'ease-in'},

    { scale: [2, 2], rotate: 90 },

  ], 5000)

},

}

4、用第三方的库 animation.css

需要做的有

从https://daneden.github.io/animate.css/下载css动画文件

把 .css 文件 改名成 .wxss文件（可进行相应的需改，毕竟小程序的大小限制摆在那里）

把它引入到你的app.wxss文件中

@import “动画文件的相对目录”

在用的时候把他和你的样式绑定

<view class="swing" style="height: 100pxwidth: 100pxbackground-color: #ccc">

block

</view>

// 给类名为swing 的文件绑定swing 的动画

.swing{

animation: swing 5s infinite

}

---