TweenMax GASP入门介绍

前言

TweenMax是一个好用的动画工具，
我觉得比jQuery更直觉，效能更棒，这系列是根据 mike 成智远老师 的TweenMax动态特效课程 整理

先备知识：

css animation 概念

javascript 基本概念 如：else if / Function / for

1.物件id ＝>#box移动的物件

2.多少秒数执行完成 =>动作的属性

3.x:"700px" 属性 ＝> 水平位移 700px

TweenMax.to("#box",1,{x:"500px"})

注意点

似jQuery 的id命名方式

在网页的世界里面，(x,y) 起点是从左上角开始

第三个参数 是用物件包着{}

demo

由左向右移动的车子（图片为已完成行动时）

Scale 比例缩放

效果出现对话框

目的：如何使用 TweenMax 把东西缩放？

第一步

针对物件对话框 做变化

transftom:scale(0,0) 是缩到最小到看不到

    #dialogBox{        position: absolute;        top: -20px;        left: -30px;        width: 259px;        height: 196px;        transform: scale(0, 0);//对话框缩到做小        background-image: url("https://upload.cc/i1/2020/08/25/rBMF6j.png")    }

我们就针对这个来做变化

在很多程式的概念里面，0是为小，1为最大。

TweenMax.to("#dialogBox",1,            {  scaleX:1 ,//控制x方向大小  scaleY:1 ,//控制Y方向大小})

第二步 动画物件位置

我们希望对话框可以从右下角跳出来，所以从
transform-Origin 变动位置，那记得一开始所说的物件最开始都是（0,0）左上角

中间为（50,50） 右下方为（100,100）

TweenMax.to("#dialogBox",1,            {  scaleX:1 ,//控制x方向大小  scaleY:1 ,//控制Y方向大小  transformOrigin:"100% 100%",//动画缩放中心点位置,希望从右下角开始})

第三步 速率变化

https://greensock.com/ease-visualizer

ease 是 TweenMax 针对动画速率的属性，我们可以根据上面网址知道各个效果是如何的？

根据面板下面红色框起来 複製下来放到 ease:"bounce.inOut"
测试你想要的动画速率属性。

TweenMax.to("#dialogBox",1,            {  scaleX:1 ,//控制x方向大小  scaleY:1 ,//控制Y方向大小  transformOrigin:"100% 100%",//动画缩放中心点位置 印为希望从右下角开始  ease: "bounce.inOut"//控制动画速率的部分  https://greensock.com/ease-visualizer})

demo

CSS 属性控制

用TweenMax 来操作 css 部分来产生动画

效果：页面载入时，画面由左到右 画面宽度由 0% 到100%

 #box{    width: 0%; /*画面设定为宽度0%*/    height: 100%;    background-color: cadetblue;    background-size:cover;    background-image: url("https://upload.cc/i1/2020/08/25/cz9MS1.jpg");}

 TweenMax.to("#box", 3,    {        width:"100%",        ease: Bounce.easeOut//加上动画速率使为生动    });

demo