css3.0动画,回顾 css3.0 动画结合贝塞尔曲线
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 属性，默认为 alltransition-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 是一个可以用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)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]范围太大。
跟随鼠标移动的 曲线运动
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);
});
}
}
.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);
}
}
4. democss 曲线运动
css 绘制各种图形clip-path: circle()
clip-path: ellipse()
clip-path: inset()
css -grid 布局
lottie 应用
5. 参考资料