H5

最近接到一个需求开发一个左右摆动动画组件，本想直接写个关键帧动画即可

    .rotate-view {
        width:200px;
        height:200px;
        transform-origin: 0.5 1;
        background-color: red;
        animation: rotateZ 4s forwards;
    }
    
    @keyframes rotateZ {
      0% {
        transform: rotate(-50deg);
      }
      25% {
        transform: rotate(50deg);
      }
      50% {
        transform: rotate(-25deg);
      }
      75% {
        transform: rotate(25deg);
      }
      100% {
        transform: rotate(0);
      }
}

 <div class='rotate-view'></div>

如果这么做就只能够固定的摆动次数、幅度，无法根据外面的参数动态设置。如果想动态设置摆动幅度和次数，就必须用js动态创建style，本以为像其他样式一样，使用js设置一下即可，结果发现js默认是无法设置关键帧动画的。 google了一下，发现基本上都是动态设置在head中添加style标签进行注册关键帧动画。 stackoverflow.com/questions/5…

let dynamicStyles = null;

function addAnimation(body) {
  if (!dynamicStyles) {
    dynamicStyles = document.createElement('style');
    dynamicStyles.type = 'text/css';
    document.head.appendChild(dynamicStyles);
  }
  dynamicStyles.sheet.insertRule(body, dynamicStyles.length);
}

addAnimation(`
      @keyframes move-eye { 
         from {
           margin-left: -20%;
         }
        to {
          margin-left: 100%;
        }
      }
    `);

var element = document.createElement("div");
element.className = "cylon-eye";
element.style.height = "50px";
element.style.width = "50px";
element.style.backgroundImage = "linear-gradient(to right,rgba(255, 0, 0, 0.1) 25%,rgba(255, 0, 0) 50%,rgba(255, 0, 0, 0.1) 75%)";
element.style.animation = "4s linear 0s infinite alternate move-eye";
document.body.appendChild(element);

微信小程序

在浏览器中可以通过上面的方法可以动态设置关键帧动画，但是发现微信小程序是无法访问document对象的，更别想createElement了。自己做了不少尝试发现都失败。 后来发现微信小程序提供了一个this.animate的方法可以做动态关键帧动画 developers.weixin.qq.com/miniprogram…

this.animate(
        '#move-view',
        [
          {
            offset: 0,
            translateX: 0,
            scale: [1, 1]
          },
          {
            offset: 0.5,
            translateX: 200,
            scale: [3, 3]
          },
          {
            offset: 1,
            translateX: 0,
            scale: [1, 1]
          }
        ],
        3000
      )

 <View id='move-view' />

Taro

如果使用taro 2.x开发，this.animate这个函数是不存在的，需要使用this.$scope.animate(xx) taro 3.x我没有尝试是否可以。

其他小程序

似乎没有找到方法动态设置关键帧

如果有大佬找到了支付宝小程序动态设置关键帧动画的方法，望不吝赐教！