点赞、收藏，放大缩小动画三端通用
uni-app 2021-09-14 16:51:08 uni-app   动画   

 感谢npro提供的animation函数方法！

 a.gif

 

XML/HTML Code复制内容到剪贴板
  1. <div class="n-flex-row n-flex-one n-align-center n-justify-center" @click="handleDig">  
  2.     <image ref="action-dig" class="bottom-icon" :src="detail.is_dig?'/static/img/icon-like2.png':'/static/img/icon-like.png'" mode="widthFix" :style="digAni"></image>  
  3.     <text :class="'bottom-text ' + (detail.is_dig?'active':'')">{{detail.dig_num}}</text>  
  4. </div>  
  5. <div class="n-flex-row n-flex-one n-align-center n-justify-center" @click="handleFave">  
  6.     <image ref="action-fave" class="bottom-icon" :src="detail.is_fave?'/static/img/icon-shoucang2.png':'/static/img/icon-shoucang.png'" mode="widthFix" :style="faveAni"></image>  
  7.       
  8.     <text class="bottom-text">{{detail.fava_num}}</text>  
  9. </div>  

 

 

XML/HTML Code复制内容到剪贴板
  1. import {animate} from '@/nPro/utils/animate.js'  
  2.   
  3.   
  4. export default {  
  5.     data() {  
  6.         return {  
  7.               
  8.             detail:{  
  9.                   
  10.                 dig_num: 5160,  
  11.                 is_dig:false, // 是否点赞  
  12.                   
  13.                 fava_num:510,  
  14.                 is_fave:false, // 是否收藏  
  15.             },
  16.             faveAni:'', // 收藏动画的样式  
  17.             faveAnimation: false, // 收藏动画  
  18.             digAni:'',  
  19.             digAnimation: false  
  20.         }  
  21.     },  
  22.     methods: {  
  23.         async handleDig(){  
  24.             if (!this.digAnimation) {  
  25.                 this.digAnimation = true  
  26.                 await this.timingScale("action-dig","digAni")  
  27.                 this.digAnimation = false  
  28.                 this.digAni = ''  
  29.                 this.detail.is_dig = !this.detail.is_dig  
  30.                   
  31.                 if(this.detail.is_dig){  
  32.                     this.detail.dig_num++  
  33.                 }else{  
  34.                     this.detail.dig_num--  
  35.                 }  
  36.                   
  37.             } else {  
  38.                   
  39.             }  
  40.         },  
  41.         async handleFave(){  
  42.             if (!this.faveAnimation) {  
  43.                 this.faveAnimation = true  
  44.                 await this.timingScale('action-fave','faveAni')  
  45.                 this.faveAnimation = false  
  46.                 this.faveAni = ''  
  47.                 this.detail.is_fave = !this.detail.is_fave  
  48.                   
  49.                 if(this.detail.is_fave){  
  50.                     this.detail.fava_num++  
  51.                 }else{  
  52.                     this.detail.fava_num--  
  53.                 }  
  54.                   
  55.             } else {  
  56.             }  
  57.         },  
  58.         timingScale(ref,ani) {  
  59.             const _this = this  
  60.             return new Promise((resolve, reject) => {  
  61.                 const el = this.$refs[ref]  
  62.                 animate(el,{  
  63.                     styles: {  
  64.                         transform: 'scale(1.5)'  
  65.                     },  
  66.                     duration: 200,  
  67.                     timingFunction: 'ease-in-out'  
  68.                 },_this, ani).then(res => {  
  69.                     setTimeout(e => {  
  70.                         animate(el,{  
  71.                             styles: {  
  72.                                 transform: 'scale(1)'  
  73.                             },  
  74.                             duration: 200,  
  75.                             timingFunction: 'ease-in-out'  
  76.                         },_this, ani).then(res => {  
  77.                             // console.log(res)  
  78.                             resolve()  
  79.                         }).catch( err => {  
  80.                             console.log(2)  
  81.                         })  
  82.                     }, 10);  
  83.                 }).catch(err => {  
  84.                     console.log(1)  
  85.                     reject(err)  
  86.                 })  
  87.             })  
  88.         }  
  89.     },  

 

animate.js

JavaScript Code复制内容到剪贴板
  1. // #ifdef APP-NVUE  
  2. const animation = uni.requireNativePlugin('animation')  
  3. const bindingX = uni.requireNativePlugin('bindingx');  
  4. // #endif  
  5.   
  6. // https://weex.apache.org/zh/docs/modules/animation.html#transition  
  7. export function animate(ref, options, ins, name, extra) {  
  8.     if (!options) return Promise.reject("请设置动画内容")  
  9.     // #ifdef APP-NVUE  
  10.     if (!ref) return Promise.reject("请指定元素")  
  11.     return new Promise((resolve, reject) => {  
  12.         animation.transition(ref, {  
  13.             styles: options.styles,  
  14.             duration: options.duration || 0,  
  15.             delay: options.delay || 0,  
  16.             timingFunction: options.timingFunction || 'ease',  
  17.             needLayout: options.needLayout || false  
  18.         }, (res)=>{  
  19.             resolve(res || {})  
  20.         })  
  21.     })  
  22.     // #endif  
  23.     // #ifndef APP-NVUE  
  24.     if (!ins || !name) return Promise.reject("请指明实例和变量")  
  25.     const styles = options.styles || {}  
  26.     const keys = Object.keys(styles)  
  27.     const tps = []  
  28.     keys.forEach(item => {  
  29.         tps.push(toLine(item))  
  30.     })  
  31.     let sty = ''  
  32.     sty += `transition-property:${tps.join(',')};`  
  33.     for (const i in keys) {  
  34.         const theK = keys[i]  
  35.         sty += `${tps[i]}:${styles[theK]};`  
  36.     }  
  37.     sty += `transition-duration: ${options.duration||0}ms;transition-delay: ${options.delay||0}ms;transition-timing-function:${options.timingFunction || 'ease'};`  
  38.     ins[name] = sty + (extra || '')  
  39.     const dur = (options.duration || 0) * 1 + (options.delay || 0) * 1  
  40.     if (dur > 0) {  
  41.         return new Promise((resolve, reject) => {  
  42.             // setTimeout(resolve, dur, {})  
  43.             setTimeout(()=>{  
  44.                 resolve({})  
  45.             }, dur)  
  46.         })  
  47.     } else {  
  48.         return Promise.resolve({})  
  49.     }  
  50.     // #endif  
  51. }  
  52.   
  53. // 驼峰转中横线  
  54. function toLine(name) {  
  55.     return name.replace(/([A-Z])/g, '-$1').toLowerCase()  
  56. }  

 

 

 

本文来自于：http://www.yoyo88.cn/study/uniapp/596.html

上一篇 小程序-微信登录
下一篇 弹窗：不匹配的版本可能造成应用异常
相关的文章
Powered by yoyo苏ICP备15045725号