1.css 3.0 动画有哪一些属性
1.transform 形状变换
- rotate 旋转 角度 默认是以Z轴
- scale (X,Y) 进行缩放操作
- skew (X,Y) 进行倾斜扭转
- translate (X,Y) 可以移动的距离。相对于自身的位置(经常在各种场景中，特别是居中对齐)。
- transform-origin 变换原点
- 设置了 transform-style: preserve-3d 的元素，就不能防止子元素溢出设置 overflow: hidden；否则会导致 preserve-3d 失效
2. transition 动画过度
- 添加某种效果可以从一种样式转变到另一个的时候
- transition-property: 指定过渡或动态模拟的 Css 属性，默认为 all
- transition-duration : 指定过渡所需要的时间
- transition-timing-function : 指定过渡函数
- transition-delay : 指定开始出现的延迟时间
- transtion 过度函数的选择值 规定动画运行速度
- linear/ease/ease-in/ease-out/ease-in-out / cubic-bezier(*)
animation
- @keyframes animationName {0% ; 100% ;}
- animation-duration 动画执行时间
- animation-time-function: 过度函数速率 (默认ease).
- animation-delay 动画延迟时间
- animation-direction 动画方向 alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。
- animation-iteration-count 动画播放次数 默认是1,infinite 无限次数播放
- animation-fill-mode 当动画不播放时，要应用到元素的样式。(forwards,backwards).
- animation-play-state 动画是否正在运行
animation: name duration timing-function delay iteration-count direction fill-mode;
- animation: transform 2s ease-in 1s 3 normal none;
perspective 景深
- 理解成人距离显示器的距离，此值越大的效果越差，越小效果越好(假设你距离 100 米和 1 米的距离去看一个边长一米的正方体。)
- backface-visibility: visible | hidden 控制能否展示元素的背面
- Css 动画性能优化 transform: translate3d(0, 0, 0); 利用GPU加速
注意 如果动画过程有闪烁(通常发生在动画开始的时候)，可以尝试
backface-visibility: hidden; perspective: 1000;- 尽可能少的使用 box-shadows 与 gradients
- 尽可能的让动画元素不在文档流中，以减少重排
position: fixed;
position: absolute;2. 抛物线运用- canvas
- <canvas> 是一个可以用js 来绘制图形的HTML元素。canvas用于绘制图标，制作图片，或者简单的动画。
Canvas 有三个基本动作
- fillRect(x, y, width, height); 填充型
- strokeRect(x, y, width, height)；线条型
- clearRect(x, y, width, height) 清除指定区域
- 绘制路径
- 1.首先，你需要创建路径起始点。
- 2.然后你使用画图命令去画出路径。
- 3.之后你把路径封闭。
- 4.一旦路径生成，你就能通过描边或填充路径区域来渲染图形
-绘制路径API
- beginPath() 新建路径
- closePath() 闭合路径
- stroke() 通过线条绘制图形轮廓
- fill() 填充路径的内通区域
- 绘制矩形+绘制圆形
- moveTo /lineTo
- arc(x, y, radius, startAngle, endAngle, anticlockwise)
- save()/restore() 状态每一次调用 restore 方法，上一个保存的状态就从栈中弹出
- translate(x, y)
3. 贝塞尔曲线
- A,B,C,D表示这四个点，其中起始点固定值为A(0,0),终止点固定为D(1,1)剩下的中间点B(x1,y1),C(x2,y2)也就是所要动态操控的两个点了,对应cubic-bezier (x1,y1,x2,y2)中的四个参数,通过改变B,C两点的坐标值来动态生成一条贝塞尔曲线表示动画中的速度变化。
规则
- x的取值区间是[0,1],取值超过该区间cubic-bezier即无效,y的的取值区间没有限制[-0.5,0.5]也是可以的,但不应该超出[0,1]范围太大。
- 跟随鼠标移动的 曲线运动
<template>
<div class='cx-container' :style="{'--x':x}">
<div class='cy-container' :style="{'--y':y}"></div>
</div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
@Component({
name: 'scssMixin',
})
export default class extends Vue {
x = "0px";
y = "0px";
//按钮移动事件
private buttonMove(e: any) {
const x = e.pageX - e.target.offsetLeft;
const y = e.pageY - e.target.offsetTop;
e.target.style.setProperty('--x', `${ x }px`);
e.target.style.setProperty('--y', `${ y }px`);
this.x = `${ x }px`;
this.y = `${ y }px`;
console.log(this.x, this.y);
}
mounted() {
document.addEventListener('click', (event) => {
//console.log("111");
this.buttonMove(event);
});
}
}
</script>
<style lang="scss">
.cx-container {
position: absolute;
top: 0px;
left: 0px;
width: 50px;
height: 50px;
transition: all 2s cubic-bezier(.06, .09, .81, .78);
transform: translateX(var(--x));
//animation: cxMove 2s linear infinite;
}
.cy-container {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #000;
//transition: all 2s cubic-bezier(0.14, -1.33, 1, 0.18);
//transition: all 2s cubic-bezier(.98, .03, .91, .77);
transition: all 2s cubic-bezier(1, -0.83, 0, 1.08);
transform: translateY(var(--y));
//animation: cyMove 2s cubic-bezier(.98, .03, .91, .77) infinite;
}
@keyframes cxMove {
0% {}
100% {
transform: translateX(200px);
}
}
@keyframes cyMove {
0% {}
100% {
transform: scale(0.5) translateY(400px);
}
}
</style>4. demo
- css 曲线运动
css 绘制各种图形
- clip-path: circle()
- clip-path: ellipse()
- clip-path: inset()
- css -grid 布局
- lottie 应用
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。