小程序页面怎么设计动画

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

利用样式实现小程序动画

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

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

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

.aniamtion {
  animation: mymove 5s infinite;
  
}
@keyframes mymove {
  from {
    
transfORM: rotate3D(100,200,300,0deg);
  }
  to {
   
transform: rotate3d(200,300,400,360deg);
  }
}

用小程序的api来实现动画

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

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

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

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()
  })
  }
})

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

<text>pages/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)
  },
 }

用第三方的库 animation.CSS。

从https://daneden.GitHub.io/animate.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;
}