gsap基礎一[from,to,fromTo]

房東家的貓發表於2020-12-02

學了幾天基礎了,感覺總算有點入了一個門的感覺啦,gasp不難,想想一年前我看著官網跟天文一樣,今年真的進步很大,在外網發現學習的新世界, 自己的獲取知識和檢視api原始碼的能力也增強了許多,現在國內的氣氛讓很多人都開始浮藻,學習還是需要注重學習本身,急不來,心靜,心平,不急躁,慢慢感覺自己的進步,遇到陌生的東西不害怕,-目前看來,去年可能是底子打的牢的一年,今年可能就是能力和視野快速成長最快的一年

我一直思考如何學好前端,如何成為前端大佬,為什麼學不好,怎麼樣才能變得優秀,也許浮藻的社會讓人沒辦法,停下來認真思考問題,學習注重的是學習本身

視覺化這個領域,國內前端落後太多啦,很多東西需要花時間花精力自己去探索發現

程式設計其實就是不斷試錯的過程

你自己獨立閱讀獨立思考不斷試錯才能走出自己的程式設計之路

對於學習和探索程式設計世界的人來說,試錯是進步的階梯

eases

速度動畫

先來一個小demo

  <style>
    body {
      margin: 0;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }

    .header {
      height: 15vh;
      background-color: red;
    }

    .links {
      display: flex;
      justify-content: space-around;
      align-items: center;
      color: white;
    }

    .content {
      flex-grow: 1; /* 剩下空間分給它*/
      display: flex;
      justify-content: space-between;
    }

    .button {
      flex: 1;
      text-align: center;
    }

    .sidebar {
      flex: 1;
      background-color: firebrick;
    }

    .footer {
      height: 15vh;
      background-color: khaki;
    }
  </style>
  <script src="gsap_dist/gsap.min.js"></script>
</head>
<body>
<div class="header">
  <div class="links">
    <div class="link">link 1</div>
    <div class="link">link 2</div>
    <div class="link">link 3</div>
  </div>
</div>
<div class="content">
  <div class="sidebar left"></div>
  <div class="button">Reverse!</div>
  <div class="sidebar right"></div>
</div>
<div class="footer"></div>
<script>
  gsap.from('.header', {
    duration: 1,/*持續時間*/
    y: '-100%',
    ease: 'bounce'/*檢視官網api 搜尋 Eases*/
  })
  gsap.from('.link', {
    duration: 1,
    opacity: 0,
    delay: 1,/*延遲1s*/
    stagger: .5/*交錯執行,就是1執行完,再執行2,再執行3*/
  })
  gsap.from('.right', {
    duration: 1,
    delay: 1.5,
    x: '-100%'
  })
  gsap.from('.left', {
    duration: 1,
    x: '200%',
    ease:'elastic'
  })
</script>

api 文件

https://greensock.com/docs/

入門學習

https://greensock.com/get-started/

from 補幀動畫

定義值的起始位置，然後將其動畫化為當前狀態

引數

  • target

    '.class' '#id' 內部使用的document.querySelectorAll()

    可以對元素，通用物件，物件陣列的引用

  • object

  • 回撥函式
gsap.from('.left',{	
    onStart(){
      // 開始的回撥函式
      console.log(1);
    },
    onUpdate(){
      // 一直執行的回撥函式
      console.log(2);
    },
    onComplete(){
      // 結束的回撥函式
      console.log(3);
    }
})

隨機載入動畫

<style>
    body {
      margin: 0;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
    .box{
      height: 50vh;
      display: flex;
      justify-content: center;
      align-items: center;
      gap:20px
    }
    .circle{
      width: 100px;
      height: 100px;
      background-color: firebrick;
      border-radius: 50%;
    }
  </style>
<div class="box">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>
<script>
  gsap.from('.circle',{
    duration:1,
    y:'random(-200,200)',
    stagger:.25
  })
</script>

stagger

交錯動畫

https://greensock.com/docs/v3/Staggers

gsap.to(".box", {
  y: 100,
  stagger: 0.1 // 多個.box的交錯時間為 .1
});

高階object的形式

  stagger: {
    grid: [7,15],
    from: "center",
    axis: "x",
    ease: "power2.in",
    amount: 1.5
  }

amount     總事件,如果是1 有 10個就每一個開始時間0.1
each	   每一個的時間
from   
取值: string|number|Array
錯開的陣列位置
from:4  就是從第5個元素出交錯
string : 'start'  'center'  'edges' 'random'  'end'
	'start'  就是從頭部=>尾部開始執行動畫
    'center'   中間=>兩邊
	'edges'   跟center相反,從兩邊=>中間
	'random'
	陣列就是設定中心點,需要跟grid配合使用
	[0.5,0.5] 中心點 
    [1,0]  右上角
    [1,1]  右下角
axis   x,y 軸
grid   多少行和多少列 [6,12]
ease   速度

Funtion 函式
引數
index 索引
target 每一個dom
list   總的list
stagger(index, target, list) {
      console.log(index, target, list);
      return index*.1
    }
跟
stagger:0.1  等價

配置資料

GSAP					CSS
x: 100					transform: translateX(100px)
y: 100					transform: translateY(100px)
rotation: 360			 transform: rotate(360deg)
rotationX: 360			transform: rotateX(360deg)
rotationY: 360			transform: rotateY(360deg)
skewX: 45				transform: skewX(45deg)
skewY: 45				transform: skewY(45deg)
scale: 2				transform: scale(2, 2)
scaleX: 2				transform: scaleX(2)
scaleY: 2				transform: scaleY(2)
xPercent: -50			transform: translateX(-50%)
yPercent: -50			transform: translateY(-50%)
delay     				延遲
ease                     速度
id                       適用於 GSDevTools ,學習這個再瞭解
invalidateOnRefresh: true   例項後立即執行,預設false	
paused                    true 建立動畫後暫停
repeat                     重複次數
repeatDelay				兩次重複之間等待的時間
repeatRefresh         	重複重新整理
reversed			  動畫反轉
startAt        			定義任何屬性的起始值,這個有時候不好理解,就是執行動畫的時候設定自身的屬性
	例如  {x: -100, opacity: 0}
yoyo                 如果為true，則其他所有repeat迭代將以相反的方向執行，以便補間看起來像是來回走動。 [開始] 1-2-3-3-2-1-1-2-3 [結束]
yoyoEase   可以yoyo: true在您定義any時自動設定yoyoEase   設定速度

keyframes: [{x:100, duration:1}, {y:100, duration:0.5}]
關鍵幀動畫
  • 駝峰化

font-size應該fontSize，background-color應該backgroundCol

多個值可以編寫函式的形式

 y: function(index, target, targets) { // 類似於官網有50個dom
        return index * 50; 
    },

random 隨機數

random([1,2,3,4]) 隨機中一個數
random(min,max) 
random(min,max,中位數)  在min和max選一個數,四捨五入接近最接近這個數
    這種方式應該適合範圍在0-1之間

回撥函式

  • onComplete：動畫完成時呼叫。

  • onStart：動畫開始時呼叫

  • onUpdate：每次動畫更新時呼叫（在動畫處於活動狀態時在每個幀上）。

  • onRepeat：每次動畫重複時呼叫一次。

  • onReverseComplete：動畫反轉後再次到達其起點時呼叫。

  • onReverseComplete 當動畫從反方向再次到達其開始位置（不包括重複）時呼叫的函式。
    onReverseCompleteParams 用於傳遞onReverseComplete函式的引數陣列。
  • onRepeat 每次動畫進入新的迭代週期（重複）時呼叫的函式。顯然，僅當您設定為非零時，才會發生這種情況repeat。
    onRepeatParams 傳遞onRepeat函式的引數陣列。
  • onInterrupt 當動畫中斷時呼叫的函式，這意味著補間在完成之前被殺死。發生這種情況是因為呼叫了它的kill（）方法或由於覆蓋。
    onInterruptParams 傳遞onInterrupt函式的引數陣列

回撥引數

引數必須是陣列的形式

    onCompleteParams: ['1212', 'aaa'],
    onComplete(...params){
      console.log(params);// ['1212', 'aaa']
    },
    onStartParams:['aaa'],
    onStart(...params){
      console.log(params); //['aaa']
    }

在函式的後面加上Params

函式其實可以寫在外面

onCompleteParams: ['1212', 'aaa'],
onComplete:add
// 這樣拿到引數
function add(...params){
    
}

關於動畫的執行

var tween = gsap.to("#logo", {duration: 1, x: 100});

// 播放
tween.play();
// 從2s後開始播放,這個回撥函式都會執行
tween.play(2);
//跳到動畫中恰好2秒並開始播放，如果裡面有 onStart的回撥不會執行
tween.play(2,false);

// 暫停
tween.pause();
同理
// 跳到動畫恰好2s
tween.pause(2);
// 不但印製事件的執行
tween.pause(2,false);

// 自殺
kill()
如果以後還使用動畫別使用這個

// 已暫停
// 拿到暫停的狀態
var paused = myAnimation.paused(); 

// true就是切換到 pause()的狀態
myAnimation.paused( true ); 

//toggle 狀態
myAnimation.paused( !myAnimation.paused() )

// 進度
0-1 之間
// 獲取當前進度
var progress = myTween.progress(); 

// 進度設定 1/4  然後播放
myTween.progress( 0.25 ).play();
如果設定了重複,進度會有所不同

//重複
// 獲取當前的重複次數
var progress = myTween.repeat(); 

// 設定重複次數,要無限重複就設定-1
myTween.repeat( 2 ); 

// 重新開始
myAnimation.restart()

// 恢復播放但不改變方向
// 剛開始沒理解,就是有記錄當前狀態的意思
// 當我播放到一般的時候,點選反向的時候,再暫停,應該點選恢復播放,因為恢復播放記錄狀態
my.resume()

// 反向
my.reverse()
引數: boolean 是否向後播放動畫
// 記錄反向狀態
切換反向播放
function clickAdd1() {
    // 獲取方向的狀態
    let obj = t1.reversed()
    t1.reversed(!obj)
  }

// 跳轉特定時間
seek(2) //跳轉到2s

如果設定到動畫的操作,設定到回撥函式的話,就要考慮引數的設定

to

定義最終的值，就是由當前=>最終的

fromTo

定義開始和結束的狀態

不能把時間,延遲等放在第二個引數,應該放在第三個引數
                      // 設定開始的狀態 ,設定結束的狀態
  gsap.fromTo(".aaa",
              {x:0,y:200,},{x:500,y:400,duration:4,delay:2,ease:"strong.inOut"});

剩下的跟from一樣就不說啦

to from fromTo

個人理解三者關係

如果我們的頁面是開發好的,我感覺應該用from 就是設定初始的狀態回到當前的狀態

如果我們想設定當前=>最終的狀態, to

如果我們即想設定之前的狀態,又設定最終的動畫,fromTo

雖然說的有點繞,但是大概是這樣的

相關文章