小程序页面怎么设计动画

小程序页面怎样设计动画

小程序页面设计动画的方法：

1、利用样式实现小程序动画

在对应的wxml文件添加以下代码：

<imageclass="aniamtion"src="../../images/page4.jfif"style="width:200rpx;height:200rpx;position:relative;"></image>

在对应的wxss文件添加以下代码：

.aniamtion{
animation:mymove5sinfinite;
/*//infinite属性是表示无穷循环的意思，没有这个属性的话动画只履行一次。*/
}
@keyframesmymove{
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来实现动画

在对应的wxml文件添加以下代码：

<viewclass="container">
<viewanimation="{{animation}}"class="view">
将做动画的块
</view>
</view>
<buttontype="default"size="mini"bindtap="rotate">
旋转
</button>

在对应的js文件添加以下代码：

Page({
data:{
animation:''
},
onReady:function(){
this.animation=wx.createAnimation({
duration:1000,
timingFunction:'linear',
delay:100,
transformOrigin:"lefttop0"
})
},
rotate(){
this.animation.rotate(150).step().translate(100).step()
this.setData({
animation:this.animation.export()
})
}
})

3、用选择器来绑定组件来来实现组件的动画，代码：

<text>pages/index7/index7.wxml</text>
<viewid="container"style="height:100px;width:100px;background-color:blue;">
container
</view>
<viewclass="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。

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

把.css文件改名成.wxss文件

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

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

在用的时候把他和你的样式绑定，代码以下：

<viewclass="swing"style="height:100px;width:100px;background-color:#ccc;">
block
</view>
//给类名为swing的文件绑定swing的动画
.swing{
animation:swing5sinfinite;
}

本文来源：https://www.yuntue.com/post/79710.html | 云服务器网，转载请注明出处！