gsap基礎一[from,to,fromTo]

時間 2020-12-02

標籤 html 前端編程 api 數組 dom ide 函數學習 flex 欄目 HTML 简体版

原文原文鏈接

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

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

可視化這個領域,國內前端落後太多啦,不少東西須要花時間花精力本身去探索發現編程

編程其實就是不斷試錯的過程api

你本身獨立閱讀獨立思考不斷試錯才能走出本身的編程之路數組

對於學習和探索編程世界的人來講,試錯是進步的階梯dom

eases

速度動畫ide

先來一個小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 補幀動畫

定義值的起始位置，而後將其動畫化爲當前狀態學習

參數flex

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同樣就不說啦