css3animation库,css animation库

小程序如何使用css3动画

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

wxml 文件

image class="aniamtion" src="../../images/page4.jfif" style="width:200rpx;height: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不是一个方法）

textpages/index7/index7.wxml/text

view id="container" style="height: 100px; width: 100px; background-color: blue;"

container

/view

view class="block" style="height: 100px; width: 100px;background-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

需要做的有

从下载css动画文件

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

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

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

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

view class="swing" style="height: 100px; width: 100px;background-color: #ccc;"

block

/view

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

.swing{

animation: swing 5s infinite;

}

html（入门）CSS3 animation动画

CSS3 animation动画

1、@keyframes 定义关键帧动画

2、animation-name 动画名称

3、animation-duration 动画时间

4、animation-timing-function 动画曲线

linear 匀速

ease 开始和结束慢速

ease-in 开始是慢速

ease-out 结束时慢速

ease-in-out 开始和结束时慢速

steps 动画步数

5、animation-delay 动画延迟

6、animation-iteration-count 动画播放次数 n|infinite

7、animation-direction

normal 默认动画结束不返回

Alternate 动画结束后返回

8、animation-play-state 动画状态

paused 停止

running 运动

9、animation-fill-mode 动画前后的状态

none 不改变默认行为

forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）

backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）

both 向前和向后填充模式都被应用

10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

举例 等待条：

效果：

CSS3@keyframes规则和animation动画

CSS3中新增了动画相关的属性，其中@keyframes规则用于设置创建动画，其原理其实就是将一套css样式逐渐变成另外一套css样式，在@keyframes中可以使用百分比表示动画进度对应的样式，0% 是动画的开始样式，100% 动画的结束样式，每个样式可以称为"关键帧样式"，每个动画可以包含很多帧，每一帧可以设置一个或多个样式。语法格式: @keyframes 动画名:{0%:{css样式} ... 100%:{css样式}} ，其中关键帧合法值是0-100%，from与 0% 相同，to与 100% 相同

使用@keyframes定义了动画，那如何使用呢？

那就得在对应要使用该动画的元素上添加animation属性

animation是一个复合属性，是所有动画属性的缩写，除animation-play-state

1. animation-name 动画名，表示要应用哪个动画

2. animation-duration 动画完成一个周期所花费的时间（秒或毫秒数），默认0

3. animation-timing-function 表示动画速度曲线，常用关键字linear、ease、ease-in、ease-out、ease-in-out，默认是ease。还可以使用cubic-bezier(n,n,n,n)设置

4. animation-delay 动画延迟时间，默认0

5. animation-iteration-count 动画播放次数，默认1 只播一次

6. animation-direction 设置动画在下个播放周期是否逆转方向，默认是 "normal"正常播放，alternate轮流反向播放

7. animation-fill-mode 用于设置动画填充模式，none 不改变默认行为；forwards当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）；backwards在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）；both向前和向后填充模式都被应用

8. animation-play-state 设置动画播放状态，paused动画已暂停，running是默认值，表示动画正在运行播放