移动互联应用

一、CSS动画

1、元素2D变换transform

1.平移

• transform变换，用于描述物体的位置旋转缩放
• transform:translate(x,y)平移，第一个参数：水平平移量(x轴),右为正方向；第二个参数：竖直平移量(y轴)，下为正方向。
• transform:translateX() 水平方向的平移
• transform:translateY() 竖直方向的平移

2.旋转

• transform:rotate()
• 单位：deg角度，rad弧度
• 转换：弧度制的PI=180°
•  沿轴进行顺时针旋转为正方向，0°代表竖直向上 ；
• 负数的含义就是360度-对应的度数，如(-30deg)=(360-30deg)=(30deg)；
• 默认旋转函数rotate是沿着z轴（即垂直屏幕的线）进行旋转的。
• rotateX()沿着水平轴进行旋转，
• rotateY()与X轴相反

3.缩放

• scale(水平方向，竖直方向)缩放，可以单参数也可以双参数
• transform:scale(1) ，1倍大小（即原来的大小）
• transform:scale(-1) ，反向
• 参数：比率；1为原本大小
• 写负数代表反向
• scaleX()水平方向的缩放（变瘦）
• scaleY()竖直方向的缩放（变高变大）

4.倾斜

• transform:skew()，倾斜，参数为角度值；
• skew(水平方向，竖直方向)缩放，可以单参数，也可以双参数

5.原点

• transform-origin: center;
• 原点的位置会影响旋转的圆心，缩放的位置
• 待选值: top， bottom ，left， right ，center， 还可以填入像素值
• 第一个参数代表水平偏移量 ，第二个参数代表竖直偏移量，当值为像素值的时候，像素值的参考位置是元素的左上角。

2、过度动画

• 动画原理：连续的播放多张图片，形成一个连贯的动画；
• css代码中如何理解动画：一个元素存在多个css状态，连续的播放改元素的这些css状态，将形成一组动画，这就是css动画；
• 帧率：描述动画在1s钟之内播放多少个状态；
• transition是过渡的意思，将会使元素从一个状态用动画形式过渡到另一个状态。

定义初始状态

transition:translateX(0px)
注意：播放过度动画至少包含 transition-property ，transition-duration

指定css属性能够产生过渡动画
transition-property：left,transform;
transition-property 还有两个待选项

• - none：无
• - all：所有属性都能播放过渡动画

动画播放时常
transition-duration: 2s;

动画播放的速度曲线
待选项

• linear：匀速直线运动
• ease-in：慢进
• ease-out：慢出
• ease-in-out：慢进慢出
• cubic-bezier：曲线函数
•  transition-timing-function：linear；

动画播放延迟
 transition-delay:3s；

合成属性

• transition: property duration timing-function delay;
• 过渡：产生过渡动画的属性，持续时间，速度，延迟时间

通过class来控制过渡动画
通常来说使用 active 类名来代表播放动画的状态,在点击某个按钮或者元素时，通过改变它的class来实现不同的效果。

改变类名的两种方式：

className

• 某某元素.className= ‘类名’
• classList.add(‘新添加的类名’)
• 某某元素.classList.add(‘新添加的类名’)
• 两者的区别在于，className每次改类名都是完整的修改，classList是添加新的一个类名，原来如果有类名那么也还在那里。

classList的其他方法：

• classList.remove() 移除某个类
• classList.contains() 判断是否包含某个类名 返回一个 bool 值； true 为包含
• transition 动画事件
• 场景: 假设有一个按钮控制动画的来回播放，当点击按钮播放动画的过程中需要禁用按钮，只有动画播放完了才能解除按钮的禁用，此时可以捕获事件来完成需求

禁用按钮 btn.disabled = true
true为禁用，false为不禁用

• transitionend过渡完成，transitionrun过渡运行中，transitionstart过渡开始；
• 如果在这个事件中，设置了后台的打印，发现打印多条测试语句，是因为有多少个过渡属性就会打印多少次测试语句；
• transitionrun在创建过渡时触发（即在任何延迟开始时；
• transitionstart当实际动画开始时触发（即在任何延迟结束时）。

3、3d变换和animation动画
animation动画

• 动画名称 animation-name:move;
• 动画播放时长 animation-duration：3s;
• 动画播放的速度曲线 animation-timing-function:linear;
• 动画延迟 animation-delay:3s;
• 动画播放状态 animation-play-state:paused（暂停）、running（播放）

animation独有的属性
动画的迭代次数（动画的播放次数） infinite 无限次
动画播放方向
待选项：

• normal（顺向播放）
• reverse（反向播放）
• alternate（来回播放）
• alternate-reverse（反向来回播放）

动画填充模式

（动画播放结束后所保留的状态）

• forwards:保留结束帧的状态
• backwards:保留起始帧的状态
• both：即保留初始状态，又保留结束状态（保留初始和结束时的状态）
• animation-fill-mode:forwards;

复合属性，取代上面的所有属性，赋值顺序，可以参考如下顺序
duration | timing-function | delay | iteration-count | direction | fill-mode
| play-state | name
duration | timing-function | delay | name
duration | name

动画帧序列
    @keyframes move {

        /* 起始帧 */
        from {
            /* 每一帧中描述该元素的状态 */
            transform: translateX(0px);
            opacity: 0;
        }

        /* 可以用百分比来代表动画的中间状态 */
        50% {
            transform: translateX(600px);
            opacity: 1;
        }

        /* 结束帧 */
        to {
            transform: translateX(300px);
        }
    }

动画的播放和暂停

• animationPlayState 动画播放状态
•  paused 暂停
•   running 播放

3D变换

•  perserve-3d 代表将元素变成一个3D空间
•  灭点到屏幕的距离 
•  若三维场景中不添加 perspective 则三维场景是一个正交视图 
•  透视原点（灭点所在的坐标）
•  原点为 0 值时，所在位置是scene的左上角
• 3d变换 是让我们的元素看上去在三维空间中发生变换（平移 旋转 缩放 倾斜）

透视的特点：

• 存在地平线
• 存在灭点
• 近大远小
• 灭点离物体越近，透视产生的形变越明显
• 和透视相对应的就是正交，正交视角没有透视的远近感，相反是种平面的感觉

要使用3d变换需要依序执行以下步骤：

• 搭建3d场景，在父元素上设置：transform-style: preserve-3d;
• 在父元素上设置透视距离：perspective: 100px;
• 给场景添加演员，给场景元素添加子元素
• 在子元素上使用3d变换