小程序中实现图片抖动的2种方法

2019年10月19日 54 次阅读 0 条评论 2 人点赞

今天来分享一个关于小程序中图片抖动的效果，需求是：定时器执行图片抖动，直接看代码

代码一：

.shaky {
        display: inline-block;
        padding: 1px;
        font-size: 12px;
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-name: shaky-slow;
        -ms-animation-name: shaky-slow;
        animation-name: shaky-slow;
        -webkit-animation-duration: 4s;
        -ms-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-timing-function: ease-in-out;
        -ms-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        -webkit-animation-delay: 0s;
        -ms-animation-delay: 0s;
        animation-delay: 0s;
        -webkit-animation-play-state: running;
        -ms-animation-play-state: running;
        animation-play-state: running;
    }
    @-webkit-keyframes shaky-slow {
        0% {
            -webkit-transform: translate(0px, 0px) rotate(0deg);
        }
        2% {
            -webkit-transform: translate(-1px, 1.5px) rotate(1.5deg);
        }
        4% {
            -webkit-transform: translate(1.3px, 0px) rotate(-0.5deg);
        }
        6% {
            -webkit-transform: translate(1.4px, 1.4px) rotate(-2deg);
        }
        8% {
            -webkit-transform: translate(-1.3px, -1px) rotate(-1.5deg);
        }
        10% {
            -webkit-transform: translate(1.4px, 0px) rotate(-2deg);
        }
        12% {
            -webkit-transform: translate(-1.3px, -1px) rotate(-2deg);
        }
        14% {
            -webkit-transform: translate(1.5px, 1.3px) rotate(1.5deg);
        }
        16% {
            -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg);
        }
        18% {
            -webkit-transform: translate(1.3px, -1.3px) rotate(-2deg);
        }
        20% {
            -webkit-transform: translate(1px, 1px) rotate(-0.5deg);
        }
        22% {
            -webkit-transform: translate(1.3px, 1.5px) rotate(-2deg);
        }
        24% {
            -webkit-transform: translate(-1.4px, -1px) rotate(2deg);
        }
        26% {
            -webkit-transform: translate(1.3px, -1.3px) rotate(0.5deg);
        }
        28% {
            -webkit-transform: translate(1.6px, -1.6px) rotate(-2deg);
        }
        30% {
            -webkit-transform: translate(-1.3px, -1.3px) rotate(-1.5deg);
        }
        32% {
            -webkit-transform: translate(-1px, 0px) rotate(2deg);
        }
        34% {
            -webkit-transform: translate(1.3px, 1.3px) rotate(-0.5deg);
        }
        36% {
            -webkit-transform: translate(1.3px, 1.6px) rotate(1.5deg);
        }
        38% {
            -webkit-transform: translate(1.3px, -1.6px) rotate(1.5deg);
        }
        40% {
            -webkit-transform: translate(-1.4px, -1px) rotate(-0.5deg);
        }
        42% {
            -webkit-transform: translate(-1.4px, 1.3px) rotate(-0.5deg);
        }
        44% {
            -webkit-transform: translate(-1.6px, 1.4px) rotate(0.5deg);
        }
        46% {
            -webkit-transform: translate(-2.1px, -1.3px) rotate(-0.5deg);
        }
        48% {
            -webkit-transform: translate(1px, 1.6px) rotate(1.5deg);
        }
        50% {
            -webkit-transform: translate(1.6px, 1.6px) rotate(1.5deg);
        }
        52% {
            -webkit-transform: translate(-1.4px, 1.6px) rotate(0.5deg);
        }
        54% {
            -webkit-transform: translate(1.6px, -1px) rotate(-2deg);
        }
        56% {
            -webkit-transform: translate(1.3px, -1.6px) rotate(-2deg);
        }
        58% {
            -webkit-transform: translate(-1.3px, -1.6px) rotate(0.5deg);
        }
        60% {
            -webkit-transform: translate(1.3px, 1.6px) rotate(-0.5deg);
        }
        62% {
            -webkit-transform: translate(0px, 0px) rotate(-1.5deg);
        }
        64% {
            -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg);
        }
        66% {
            -webkit-transform: translate(1.6px, -1.6px) rotate(0.5deg);
        }
        68% {
            -webkit-transform: translate(0px, -1.6px) rotate(-2deg);
        }
        70% {
            -webkit-transform: translate(-1.6px, 1px) rotate(1.5deg);
        }
        72% {
            -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg);
        }
        74% {
            -webkit-transform: translate(1.3px, -1.6px) rotate(-0.5deg);
        }
        76% {
            -webkit-transform: translate(1.4px, 1px) rotate(-0.5deg);
        }
        78% {
            -webkit-transform: translate(-1px, 1.4px) rotate(2deg);
        }
        80% {
            -webkit-transform: translate(1.4px, 1.6px) rotate(2deg);
        }
        82% {
            -webkit-transform: translate(-1.6px, -1.6px) rotate(-0.5deg);
        }
        84% {
            -webkit-transform: translate(-1.4px, 1.4px) rotate(-2deg);
        }
        86% {
            -webkit-transform: translate(1px, 1.4px) rotate(-2deg);
        }
        88% {
            -webkit-transform: translate(-1.4px, 1.4px) rotate(-1.5deg);
        }
        90% {
            -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg);
        }
        92% {
            -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg);
        }
        94% {
            -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg);
        }
        96% {
            -webkit-transform: translate(-1.4px, 1.3px) rotate(-2deg);
        }
        98% {
            -webkit-transform: translate(1.3px, 1px) rotate(-0.5deg);
        }
    }
    @keyframes shaky-slow {
        0% {
            transform: translate(0px, 0px) rotate(0deg);
        }
        2% {
            transform: translate(-1px, 1.5px) rotate(1.5deg);
        }
        4% {
            transform: translate(1.3px, 0px) rotate(-0.5deg);
        }
        6% {
            transform: translate(1.4px, 1.4px) rotate(-2deg);
        }
        8% {
            transform: translate(-1.3px, -1px) rotate(-1.5deg);
        }
        10% {
            transform: translate(1.4px, 0px) rotate(-2deg);
        }
        12% {
            transform: translate(-1.3px, -1px) rotate(-2deg);
        }
        14% {
            transform: translate(1.5px, 1.3px) rotate(1.5deg);
        }
        16% {
            transform: translate(1.5px, -1.5px) rotate(-1.5deg);
        }
        18% {
            transform: translate(1.3px, -1.3px) rotate(-2deg);
        }
        20% {
            transform: translate(1px, 1px) rotate(-0.5deg);
        }
        22% {
            transform: translate(1.3px, 1.5px) rotate(-2deg);
        }
        24% {
            transform: translate(-1.4px, -1px) rotate(2deg);
        }
        26% {
            transform: translate(1.3px, -1.3px) rotate(0.5deg);
        }
        28% {
            transform: translate(1.6px, -1.6px) rotate(-1.5deg);
        }
        30% {
            transform: translate(-1.3px, -1.3px) rotate(-1.5deg);
        }
        32% {
            transform: translate(-1px, 0px) rotate(2deg);
        }
        34% {
            transform: translate(1.3px, 1.3px) rotate(-0.5deg);
        }
        36% {
            transform: translate(1.3px, 1.6px) rotate(1.5deg);
        }
        38% {
            transform: translate(1.3px, -1.6px) rotate(1.5deg);
        }
        40% {
            transform: translate(-1.4px, -1px) rotate(-0.5deg);
        }
        42% {
            transform: translate(-1.4px, 1.3px) rotate(-0.5deg);
        }
        44% {
            transform: translate(-1.6px, 1.4px) rotate(0.5deg);
        }
        46% {
            transform: translate(-2.1px, -1.3px) rotate(-0.5deg);
        }
        48% {
            transform: translate(1px, 1.6px) rotate(1.5deg);
        }
        50% {
            transform: translate(1.6px, 1.6px) rotate(1.5deg);
        }
        52% {
            transform: translate(-1.4px, 1.6px) rotate(0.5deg);
        }
        54% {
            transform: translate(1.6px, -1px) rotate(-2deg);
        }
        56% {
            transform: translate(1.3px, -1.6px) rotate(-2deg);
        }
        58% {
            transform: translate(-1.3px, -1.6px) rotate(0.5deg);
        }
        60% {
            transform: translate(1.3px, 1.6px) rotate(-0.5deg);
        }
        62% {
            transform: translate(0px, 0px) rotate(-1.5deg);
        }
        64% {
            transform: translate(-1.6px, -1.6px) rotate(-2deg);
        }
        66% {
            transform: translate(1.6px, -1.6px) rotate(0.5deg);
        }
        68% {
            transform: translate(0px, -1.6px) rotate(-2deg);
        }
        70% {
            transform: translate(-1.6px, 1px) rotate(1.5deg);
        }
        72% {
            transform: translate(-1.6px, 1.6px) rotate(2deg);
        }
        74% {
            transform: translate(1.3px, -1.6px) rotate(-0.5deg);
        }
        76% {
            transform: translate(1.4px, 1px) rotate(-0.5deg);
        }
        78% {
            transform: translate(-1px, 1.4px) rotate(2deg);
        }
        80% {
            transform: translate(1.4px, 1.6px) rotate(2deg);
        }
        82% {
            transform: translate(-1.6px, -1.6px) rotate(-0.5deg);
        }
        84% {
            transform: translate(-1.4px, 1.4px) rotate(-2deg);
        }
        86% {
            transform: translate(1px, 1.4px) rotate(-2deg);
        }
        88% {
            transform: translate(-1.4px, 1.4px) rotate(-1.5deg);
        }
        90% {
            transform: translate(-1.6px, -1.6px) rotate(-2deg);
        }
        92% {
            transform: translate(-1.4px, 1.6px) rotate(2deg);
        }
        94% {
            transform: translate(-1.6px, -1.6px) rotate(-2deg);
        }
        96% {
            transform: translate(-1.4px, 1.3px) rotate(-2deg);
        }
        98% {
            transform: translate(1.3px, 1px) rotate(-0.5deg);
        }
    }

代码二：

.animation {
  animation: mymove 1s 1 normal;
  -webkit-animation: mymove 1s 1 normal;
}

@keyframes mymove {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }

  25% {
    transform: rotate(-25deg);
    -webkit-transform: rotate(-25deg);
  }

  50% {
    transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
  }

  75% {
    transform: rotate(-25deg);
    -webkit-transform: rotate(-25deg);
  }

  100% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
}

@-webkit-keyframes mymove {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }

  25% {
    transform: rotate(-25deg);
    -webkit-transform: rotate(-25deg);
  }

  50% {
    transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
  }

  75% {
    transform: rotate(-25deg);
    -webkit-transform: rotate(-25deg);
  }

  100% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
}

小程序的代码：

index.js代码片段通过变量shake来控制

  //倒计时
  countDownshake: function() {
    let that = this
    setInterval(function() {
      let shake = that.data.shake;
      if (shake) {
        that.setData({
          shake: ""
        })
      } else {
        that.setData({
          shake: 'animation',
        })
      }
    }, 3000)
  },

您的一次评论就是对本站点的小小支持.

阳阳

讲梦想、讲奋斗可以，前提是钱要给够。

文章评论（0）

接收回复邮件通知