如何实现高级的动画效果

前端开发中，最让人头疼的就是产品经常会提出让人头疼的动画效果，或者奇怪的需求。相信大家在动画开发中用的最多的就是 animate.css，这个动画只是用与一些简单的场景，笔记一段文字抖动，一段文字进场和出场的效果，但是无法满足，如何让一行文字实现炫酷吊炸天的动画。也无法实现动态实物的效果，比如一个真实感很强正在骑行的自行车，这个可让前端工程师绞尽脑汁。有人会说,我只需要 cv 就可以。熬 🤔 你确定你可以找到符合你的需要的案例么？这还真不如自己写一个来的快。那么问题来了，怎么优雅和高效的编写这样的动画呢？敲重点anime.js就可以帮助我们完成各类复杂的动画。

anime.js 是个啥?

anime.js 是一款功能强大的 Javascript 动画库插件。anime.js 可以和 CSS3 属性，SVG，DOM 元素和 JS 对象一起工作，制作出各种高性能，平滑过渡的动画效果。官网原话

兼容性

兼容性感觉还可以

如何使用

安装 anime.js

npm install animejs
bower install animejs

使用方式在页面中引入 anime.min.js 文件。

<script type="text/javascript" src="js/anime.min.js"></script>

HTML 结构以动画两个 div 元素为例，HTML 结构如下：

<article>
  <div class="blue"></div>
  <div class="green"></div>
</article>

初始化插件通过 anime() 方法来构造一个对象实例，以 json 对象的方式传入需要的参数：

var myAnimation = anime({
  targets: ['.blue', '.green'],
  translateX: '13rem',
  rotate: 180,
  borderRadius: 8,
  duration: 2000,
  loop: true
});

实战演练一下哈 😜

X 动画效果

html

html

<button id="runaway-btn">Click Me &#129315;</button>

css

css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  user-select: none;
}

body {
  background-color: rgb(31, 31, 31);
}

button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 4rem;
  width: 10rem;
  font-size: 1.5rem;
  border-radius: 5px;
  border: none;
  box-shadow: 1px 1px 5px black;
  background-color: white;
}

const button = document.getElementById('runaway-btn')

const animateMove = (element, prop, pixels) =>
  anime({
    targets: element,
    [prop]: `${pixels}px`,
    easing: 'easeOutCirc'
  })

;['mouseover', 'click'].forEach(function (el) {
  button.addEventListener(el, function (event) {
    const top = getRandomNumber(window.innerHeight - this.offsetHeight)
    const left = getRandomNumber(window.innerWidth - this.offsetWidth)

    animateMove(this, 'left', left).play()
    animateMove(this, 'top', top).play()
  })
})

const getRandomNumber = (num) => {
  return Math.floor(Math.random() * (num + 1))
}

效果展示图

anime.js 是个啥? ​

实战演练一下哈 😜 ​

anime.js 是个啥?

实战演练一下哈 😜