前端gsap——7行代码实现星空闪烁效果

最健全的web动画库之一：gsap官网
gsap提供了核心功能和插件功能，以下为不使用任何插件时，最简单的用法。代码很简单，先上代码：

import {gsap} from 'gsap/all'

gsap.to(".star", {
duration: 1.5,
scale:"random(0.5,1.5)",
repeat: -1,
yoyo:true,
opacity: "random(0,1)"
});

代码讲解：
第一行：引入gsap，引入方式多样，支持本地静态资源、cdn等方式。ES6引入模式需要先在项目中yarn install gsap，下载gsap。第一次接触，建议使用cdn方式。
第二行：.to()方法，gsap核心方法，类似于css动画中的to，简单来说就是根据后面设置的参数，确定元素最终显示什么效果。第一个参数是绑定需要动画的元素，可以是类名或者id。此处为类名为‘star’的星星图案。
第三行：duration参数，设置动画时间
第四行：scale参数，可以设置元素最终放大到多少倍。random是一个随机函数，达到的效果就是不同的元素，动画最终的效果会形成不同大小的星星。
第五行：repeat参数，设置动画重复的次数，-1表示无限重复。
第六行：yoyo参数，悠悠参数，开启后会自动形成一个往复的动画，有利于动画衔接。
第七行：opacity参数，设置元素最终的透明度。

最终效果：

代码外的配套知识：

（1）建议星星元素使用svg格式，拿到ui设计的psd文件，将需要的元素导出成svg模式，发现图片被压缩成一个image元素，所以用菜鸟svg工具，随机描绘不同的圆点，作为星星。保存后的svg是有宽高的，删除默认宽高，设置宽度为100%，并设置viewBox的宽高比

（2）这次的星星从始至终都是比较简单的圆形，根据gsap的官网文档，其实是可以做到当星星最小时是圆形，最大时变成五角星的，但是需要和同事商量后，确定是否需要此效果。这里想提醒的是，gsap有svg形状过渡的能力。