小程序页面怎么设计动画 小程序做动画

文章摘要：小程序页面怎么设计动画 小程序做动画

小程序页面设计动画的方法： 1、利用样式实现小程序动画 在对应的wxml文件添加以下代码： <image […]

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

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

在对应的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来实现动画

在对应的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()

  })

  }

})

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

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

  },

 }

4、用第三方的库 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;

}