微信小程序点赞爱心动效

只是健忘症的记录

效果图

实现

index.wxml

<image style="width: 50px;height: 50px;"  bindtap="clickHeart"
class="{{class}}" 
src="{{class== 'heart'?'../../assets/heart.png' : '../../assets/heart-active.png'}}">

index.js

data: {
        class: 'heart'
       },
    
clickHeart() {
        if (this.data.class == 'heart') {
            this.setData({
                class: 'heart-active'
            })
        } else if (this.data.class == 'heart-active') {
            this.setData({
                class: 'heart-center'
            })
            setTimeout(() => {
                this.setData({
                    class: 'heart'
                })
            }, 200);
        }
 },

index.wxss

    
  .heart {
    animation: beat3 0.2s ease;
  }
  .heart-center {
    animation: beat2 0.2s ease;
  }
  .heart-active {
    animation: beat 0.5s ease;
  }
  
  @keyframes beat {
    0% {
      transform: scale(1);
    }
    40% {
      transform: scale(0);
    }
    80% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes beat2 {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(0.7);
    }
  }
  @keyframes beat3 {
    0% {
      transform: scale(0.7);
    }
    100% {
      transform: scale(1);
    }
  }