vue2+GSAP

给自己记录的，之前从来没用过什么动画库，因为工作中需求没遇到。一般都是我自己在小程序自己用css直接写，但是我今天看到了极氪的官网，突然生出想学习一下咋用这个库的心情。因为他们的动画蛮好看的，之前我接私活也做过官网，一般的动画我也都写过，但是写的都不是很流畅，效果是有的，都是自己设计的比较生硬。之前看到b站也是用的这个动画库，想 try~ try~。

1. 配合vue “食用”

有各种方法，引入文件，下载压缩包，我肯定还是npm直接安装哒~

官网地址：官网地址 greensock.com


npm install gsap


yarn add gsap

然后在vue项目里面引用一下，页面上就可以直接使用了


<template>
  <div class="productDisplay-container">
 <!--这个是我自己的导航-->
    <navigation></navigation>
    <div class="box">
      <img class="logo" src="https://dev-new-storage.oss-cn-chengdu.aliyuncs.com/wx-image/%E6%89%8B%E5%8A%BF2023471413.png" >
    </div> 
    <!--不存在的是我自己项目的bottom，不管的~ -->
    <bottom></bottom>
  </div>
</template> 

<script>
import Navigation from '@/components/navigation'
import Bottom from '@/components/bottom'
import { mapState } from 'vuex'
//重要的是引入这个，上面的都是我自己项目的东西
import { TweenMax, gsap } from "gsap"

export default {
  name: 'index',
  components: { Bottom, Navigation },
  computed:{
    ...mapState(['language'])
  },
  data(){
    return{
      changeLanguage:1,
      showBack:null,
      chooseIndex:0
    }
  },
  //不要在created里面使用，这个地方没有完全拿到用不起来，熟悉生命周期的都晓得，我学的不牢固
  //踩坑了，记录一下，记住！记住！
  created() {
    if (localStorage.getItem('changeLanguage')){
      this.changeLanguage=JSON.parse(localStorage.getItem('changeLanguage')).value
    }
  },
  mounted() {
    this.animation()
  },
  methods:{
    animation(){
    //这里就是使用了
      gsap.to(".logo",{duration:2,x:300})
    },  
  }
}
</script>

2.学习一下语法吧，好朋友们。

基础的使用方法我感觉就是


gsap.to(".logo",{duration:2,x:300,ease:"elastic.in(1,1)" })

 gsap.method("targets",{Methods//改变的属性,ease// 运动状态,style//css样式，function//还可以写回调函数})

在后面的变量里面还可以写css样式。

1.ease

ease的值有很多个，官方有很直接的示例可以直接玩转，真的太好理解了，英语不好都可以在官网随便学习。

"linear" (a.k.a. "none" or "power0")
"power1" (a.k.a. "quad")
"power2" (a.k.a. "cubic")
"power3" (a.k.a. "quart")
"power4" (a.k.a. "strong" or "quint")
"back"
"bounce"
"circ"
"elastic"
"expo"
"sine"
"steps(n)"

2.callback

onComplete：动画完成时调用。
onStart：动画开始时调用
onUpdate：每次动画更新时调用（在动画处于活动状态时每帧调用）。
onRepeat：每次动画重复时调用一次。
onReverseComplete：动画反转后再次到达其起点时调用。

示例.jpg

3.Methods

tween.to(); 就是从你默认的效果动画变成你to花括号里面写的样式。
tween.from(); 就是和to正好相反，比如to是一个放大，那么from就是从你写的样子变成默认样式就是说是个缩小。
tween.fromTo(); 自定义的起始值和结束值
tween.set(); 没有过渡动画一步到位。
tween.pause(); 暂停
tween.resume(); 恢复
tween.reverse(); 反向播放
tween.seek(0.5); 跳到0.5s
tween.progress(0.25); 跳到4分之1处
tween.timeScale(0.5); 速度减慢
tween.timeScale(2); 速度翻倍
tween.kill(); 删除动画

4.简写属性

属性名字	作用	css代码
rotationX: 360	旋转，绕着x轴转	transform: rotateX(360deg)
rotationY: 360	旋转，绕着y轴转	transform: rotateY(360deg)
skewX: 45	拉伸，沿着x轴拉伸45度像平行四边形	transform: skewX(45deg)
skewY: 45	拉伸，沿着y轴拉伸45度像菱形）	transform: skewY(45deg)
x: 100	平移，向x轴平移100px	transform: translateX(100px)
y: 100	平移，向y轴平移100px	transform: translateY(100px)
scaleX: 2	缩放，沿着x轴放大2倍	transform: scaleX(2)
scaleY: 2	缩放，沿着y轴放大2倍）	transform: scaleY(2)
xPercent: -50	水平移动(元素宽度的百分比)	transform: translateX(-50%)
yPercent: -50	垂直移动(元素宽度的百分比)	transform: translateY(-50%)
scale: 2	缩放	transform: scale(2, 2)
rotationY: 360	在Y轴旋转360度（绕着y轴转）	transform: rotateY(360deg)

在单位方面更加灵活

x : 200 , // 使用默认的 px 
x : "+=200" // 相对值
x : '40vw' , // 或传入具有不同单位的字符串以供 GSAP 解析
x : () => window . innerWidth / 2 , // 你甚至可以使用函数值来进行计算！
rotation : 360 // 使用默认的度数
rotation : "1.25rad" // 使用弧度

属性	描述
duration	动画时长(秒)默认值:0.5
delay	动画开始前的延迟量(秒)
repeat	动画应该重复多少次。
yoyo	如果为true，则每隔一次重复的补间将朝相反的方向运行。(像溜溜球一样)默认值:false
stagger	每个目标动画开始之间的时间(以秒为单位)(如果提供多个目标)
ease	控制动画过程中的变化速度，比如动作的“个性”或感觉。默认值:“power1.out”
onComplete	动画完成时运行的函数callback的感觉

5.时间线 Timelines

// 创建时间线
let tl = gsap.timeline()

// 将补间添加到时间轴上-注意我们使用的是tl.to而不是gsap.to
tl.to(".green", { x: 600, duration: 2 });
tl.to(".purple", { x: 600, duration: 1 });
tl.to(".orange", { x: 600, duration: 1 });

更多高级用法：greensock.com/get-started…

tween.pause(); 暂停
tween.resume(); 恢复
tween.reverse(); 反向播放
tween.seek(0.5); 跳到0.5s
tween.progress(0.25); 跳到4分之1处
tween.timeScale(0.5); 速度减慢
tween.timeScale(2); 速度翻倍
tween.kill(); 删除动画

vue2+GSAP（自用记录）