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 相关文章推荐
显示、隐藏密码
Jul 01 Javascript
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
jquery 选择器部分整理
Oct 28 Javascript
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
Dec 28 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
Jan 08 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 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 FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
js和as的稳定传值问题解决
2013/07/14 Javascript
js 三级关联菜单效果实例
2013/08/13 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
[41:17]VG vs Optic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
Python使用django搭建web开发环境
2017/06/09 Python
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
python实现flappy bird游戏
2018/12/24 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
python连接手机自动搜集蚂蚁森林能量的实现代码
2021/02/24 Python
微软香港官网及网上商店:Microsoft HK
2016/09/01 全球购物
计算机本科生自荐信
2013/10/15 职场文书
房屋租赁协议书范本
2014/04/10 职场文书
党员查摆剖析材料
2014/10/10 职场文书
责任书格式
2015/01/29 职场文书
幼师中班个人总结
2015/02/12 职场文书
被告代理词范文
2015/05/25 职场文书
高二英语教学反思
2016/03/03 职场文书
Python图像处理之图像拼接
2021/04/28 Python
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL