微信小程序动画两种实现方式

Javanx

修改于 2019-09-04 15:47:48

2.1K0

修改于 2019-09-04 15:47:48

文章被收录于专栏：web秀

开发小程序，实现动画功能，有两种实现方式，下面来看看具体怎么做：

JS动画

利用小程序API提供的wx.createAnimation(OBJECT)实现，API中是这样说：创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。

wxml

<view class="animation">
  <view class="dis-flex">
    <view class='flex3' animation="{{lAnimate}}">{{start}}</view>
    <view class='flex1' bindtap="trigger">
      <em class='iconfont switch-icon'></em>
    </view> 
    <view class='flex3' animation="{{rAnimate}}">{{end}}</view>
  </view>
</view>

css

@font-face {
  font-family: 'iconfont';  /* project id 703892 */
  src: url('//at.alicdn.com/t/font_703892_u8zob8nchpf.eot');
  src: url('//at.alicdn.com/t/font_703892_u8zob8nchpf.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_703892_u8zob8nchpf.woff') format('woff'),
  url('//at.alicdn.com/t/font_703892_u8zob8nchpf.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_703892_u8zob8nchpf.svg#iconfont') format('svg');
}
.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.animation{
  margin-top: 20rpx;
  padding: 10rpx 30rpx;
}
.dis-flex{
    display: flex;
}

.flex1{
    flex: 1;
    text-align: center;
}
.flex3{
    flex: 3;
    text-align: center;
}
.switch-icon:before { 
  content: "\e8c8"; 
}

Page({
  data: {
    lAnimate: '',
    rAnimate: '',
    start: '北京',
    end: '深圳'
  },
  trigger() {
    let vm = this;
    let option = {
      duration: 100, // 动画执行时间
      timingFunction: 'ease-in' // 动画执行效果
    };
    var lanimation = wx.createAnimation(option); // 创建动画
    var ranimation = wx.createAnimation(option);
    // 起点
    lanimation.translateX(100);
    lanimation.opacity(0.1).step();
    // 终点
    ranimation.translateX(-100);
    ranimation.opacity(0.1).step();
    vm.setData({
      lAnimate: lanimation.export(),// 开始执行动画
      rAnimate: ranimation.export() // 开始执行动画
    })
    setTimeout(() => {
      // 起点
      lanimation.translateX(0);
      lanimation.opacity(1).step();
      // 终点
      ranimation.translateX(0);
      ranimation.opacity(1).step();
      var temp = vm.data.start;
      vm.setData({
        lAnimate: lanimation.export(),// 开始执行动画
        rAnimate: ranimation.export(),// 开始执行动画
        end: temp,
        start: vm.data.end
      })
    }, 100);
  }
})

CSS3动画

CSS3动画还是用animation来完成，需要注意的是只需要@-webkit-keyframes,不需要其他的，如@-moz-keyframes，运用会报错

@-webkit-keyframes lanimation
{
  from {left:px2rpx(0px);}
  to {left:px2rpx(140px);}
}

.start{
  animation lanimation 2.5s ease-in infinite
  animation-delay 0.6s
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018年7月10日，如有侵权请联系 cloudcommunity@tencent.com 删除

小程序