前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序动画两种实现方式

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

作者头像
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

代码语言:javascript
复制
<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

代码语言:javascript
复制
@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"; 
}

js

代码语言:javascript
复制
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,运用会报错

代码语言:javascript
复制
@-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 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • JS动画
  • CSS3动画
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档