mpvue实现小程序签到金币掉落动画(api实现)


Posted in Javascript onOctober 17, 2019

这里使用小程序自带的api来实现,用小程序来写动画的恶心点在于,没有帧,只能用setimeout 来作为帧来使用,

下面是实现代码, 下面是简单用div代替了图片,需要什么图片,可以自行替换相应的div即可

需要变成原生小程序,则需要修改一下代码的写法

效果图:

mpvue实现小程序签到金币掉落动画(api实现)

创建金币动画组件 clockAnimation.vue

<template>
 <div class="container" v-if='isShow'>
  <!-- 创建金币对象 -->
  <!-- 大金币 -->
  <div :class="coinShow?'coinShow bgCoin':'bgCoin'" :animation="bgCoinAnimation" ></div>
  <!-- 7个小金币 -->
  <div :class="coinShow?'coinShow coin coin1':' coin coin1'" :animation="coinAnimation1">1</div>
  <div :class="coinShow?'coinShow coin coin2':' coin coin2'" :animation="coinAnimation2">2</div>
  <div :class="coinShow?'coinShow coin coin3':' coin coin3'" :animation="coinAnimation3">3</div>
  <div :class="coinShow?'coinShow coin coin4':' coin coin4'" :animation="coinAnimation4">4</div>
  <div :class="coinShow?'coinShow coin coin5':' coin coin5'" :animation="coinAnimation5">5</div>
  <div :class="coinShow?'coinShow coin coin6':' coin coin6'" :animation="coinAnimation6">6</div>
  <div :class="coinShow?'coinShow coin coin7':' coin coin7'" :animation="coinAnimation7">7</div>
 </div>
</template>
<script>
 export default{
  data() {
   return {
    coinShow:false,//金币对象是否显示,用于重置动画时,隐藏对象
    isShow:false, //遮罩显示
   //大金币动画
   bgCoinAnimation:{},
   //小金币动画
   coinAnimation1:{},
   coinAnimation2:{},
   coinAnimation3:{},
   coinAnimation4:{},
   coinAnimation5:{},
   coinAnimation6:{},
   coinAnimation7:{},
   }
  },
  methods: {
      //动画
   animation(){
    this.coinShow =false
     this.isShow = true
    this.bgAnimation()
    this.smallAnimation()
  },
  //大金币动画
  bgAnimation(){
     var animation = wx.createAnimation({
    duration:1000,
   timingFunction: 'ease-in-out',
  })
    this.timer = setTimeout(()=>{
      animation.translate3d(0,30,0).step().translate3d(0,0,0).step().rotate(80).step({duration:400}).rotate(0).step({duration:500})
   this.bgCoinAnimation = animation.export()
    },100)
     setTimeout(()=>{
   animation.opacity(0).scale(4).step()
   this.bgCoinAnimation = animation.export()
  },3000)
   },
   //小金币动画
   smallAnimation(){
      var animation = wx.createAnimation({
    duration:1000,
   timingFunction: 'ease-in-out',
  })
  animation.translate3d(0,30,0).step().translate3d(0,0,0).step()
  setTimeout(()=>{
    this.coinAnimation1 = animation
  },300)
  setTimeout(()=>{
    this.coinAnimation2 = animation
  },500)
  setTimeout(()=>{
    this.coinAnimation3 = animation
  },600)
  setTimeout(()=>{
    this.coinAnimation4 = animation
  },700)
  setTimeout(()=>{
    this.coinAnimation5 = animation
  },800)
  setTimeout(()=>{
    this.coinAnimation6 = animation
  },900)
  setTimeout(()=>{
    this.coinAnimation7 = animation.export()
  },1000)
 //小金币掉落动画
  setTimeout(()=>{
    animation.translate3d(0,1000,0).step()
    this.coinAnimation1 = animation
    this.coinAnimation2 = animation
    this.coinAnimation3 = animation
    this.coinAnimation4 = animation
    this.coinAnimation5= animation
    this.coinAnimation6 = animation
    this.coinAnimation7 = animation
  },3000)
 //动画结束,重置动画初始位置
  setTimeout(()=>{
   this.coinShow =true
      var animation = wx.createAnimation({
       duration:300,
   timingFunction: 'ease-in-out',
  })
      var animation2 = wx.createAnimation({
       duration:300,
   timingFunction: 'ease-in-out',
  })
   animation.translate3d(0,-1000,0).step()
   animation2.translate3d(0,-1000,0).step().scale(1).step()
    this.bgCoinAnimation = animation2.export()
    this.coinAnimation1 = animation
    this.coinAnimation2 = animation
    this.coinAnimation3 = animation
    this.coinAnimation4 = animation
    this.coinAnimation5= animation
    this.coinAnimation6 = animation
    this.coinAnimation7 = animation
   setTimeout(()=>{
    this.isShow = false
   },500)
  },4000)
   }
   },
  mounted () {
  },
  onShow(){
  }
 }
</script>
<style lang="scss" scoped>
.container{
 position:absolute;
 top:0;
 left: 0;
 width: 100%;
 height: 100vh;
 // z-index: 999;
 background: rgba(5, 5, 5,0.5)
}
.bgCoin{
 background: rgb(233, 201, 19);
 border-radius: 50%;
 width: 100rpx;
 height: 100rpx;
 position: absolute;
 left: 350rpx;
 margin-left:-50rpx;
 top:600rpx;
  text-align: center;
  line-height: 100rpx;
  color: #ffffff;
  transform:rotate(180deg);
  transform:translate3d(0,-1000rpx,0);
}
.coinShow{
 opacity: 0;
}
.coin{
 background: rgb(233, 201, 19);
 border-radius: 50%;
 width: 50rpx;
 height: 50rpx;
  position: absolute;
  font-size: 24rpx;
  text-align: center;
  line-height: 40rpx;
  color: #ffffff;
  transform:translate3d(0,-1000rpx,0);
}
.coin1{
 top:40rpx;
 left:60rpx;
}
.coin2{
 top:90rpx;
 left:200rpx;
}
.coin3{
 top:860rpx;
 left:250rpx;
}
.coin4{
 top:150rpx;
 left:600rpx;
}
.coin5{
 top:270rpx;
 left:500rpx;
}
.coin6{
 top:490rpx;
 left:580rpx;
}
.coin7{
 top:350rpx;
 left:150rpx;
}
</style>

使用 引入组件

<template>
  <view>
   <view @click="clockInAnimation">立即签到</view>
 <clockAnimation :isShow="clockIsShow" ref="clockAnimation"></clockAnimation>
 </view>
</template>
<script>
     //引入组件
   import clockAnimation from "../../components/clockAnimation.vue";  
 export default {
 components: {
  clockAnimation
 },
 data() {
   return {
      clockIsShow: false,
   }
 },
  methods: {
  clockInAnimation() {
   this.clockIsShow = true;
   this.$refs.clockAnimation.animation();
  },
  }
</script>

总结

以上所述是小编给大家介绍的mpvue实现小程序签到金币掉落动画(api实现),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Javascript 跨域访问解决方案
Feb 14 Javascript
IE JS编程需注意的内存释放问题
Jun 23 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
鼠标放在图片上显示大图的JS代码
Mar 26 Javascript
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 Javascript
Bootstrap基本插件学习笔记之折叠(22)
Dec 08 Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
Jan 19 Javascript
Javascript中prototype与__proto__的关系详解
Mar 11 Javascript
webpack4 optimization使用总结
Nov 10 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 #Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 #Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 #Javascript
浅谈Vue.set实际上是什么
Oct 17 #Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 #Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 #Javascript
Weex开发之地图篇的具体使用
Oct 16 #Javascript
You might like
PHP 9 大缓存技术总结
2015/09/17 PHP
php简单统计在线人数的方法
2016/05/10 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
PHP大神的十大优良习惯
2016/09/14 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
js之onload事件的一点使用心得
2013/08/14 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
vuejs指令详解
2017/02/07 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
深入理解Python中的元类(metaclass)
2015/02/14 Python
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
Pycharm设置界面全黑的方法
2018/05/23 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
使用CSS3来代替JS实现交互
2017/08/10 HTML / CSS
介绍一下EJB的体系结构
2012/08/01 面试题
四川成都导游欢迎词
2014/01/18 职场文书
调解员先进事迹材料
2014/02/07 职场文书
个人考核材料
2014/05/15 职场文书
乡镇保密工作责任书
2014/07/28 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
写给导师的自荐信
2015/03/06 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
电话营销开场白
2015/05/29 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
医德医风学习心得体会
2016/01/25 职场文书
分享一些Java的常用工具
2021/06/11 Java/Android