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 相关文章推荐
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
javascript验证身份证完全方法具体实现
Nov 18 Javascript
Javascript学习指南
Dec 01 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
Jquery实现鼠标移动放大图片功能实例
Mar 25 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
react-native-tab-navigator组件的基本使用示例代码
Sep 07 Javascript
vue实现页面滚动到底部刷新
Aug 16 Javascript
jQuery操作元素追加内容示例
Jan 10 jQuery
JavaScript多种图形实现代码实例
Jun 28 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
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脚本的10个技巧(3)
2006/10/09 PHP
基于php权限分配的实现代码
2013/04/28 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
微信小程序实现tab左右切换效果
2020/11/15 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
python使用fork实现守护进程的方法
2017/11/16 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
ipython和python区别详解
2019/06/26 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
Python浮点型(float)运算结果不正确的解决方案
2020/09/22 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
animation和transition的区别
2020/10/12 HTML / CSS
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
船舶专业个人求职信范文
2014/01/02 职场文书
感恩节活动方案
2014/01/27 职场文书
《雷雨》教学反思
2014/02/20 职场文书
彩妆大赛策划方案
2014/05/13 职场文书