24.过渡属性

一般用来做简易的动画，从一个状态渐渐过渡到另一个状态，它的语法是这样的

属性是像宽度，高度，位置，背景颜色这种。必选参数

花费时间单位是s，必须要写单位。可以使用浮点秒数，比如0.5s，必选参数

运动曲线是指渐变的速度情况，比如前快后慢，前慢后快这种，默认是ease，我们一般不用动这个。可选参数

何时开始的单位是s，默认是0s，如果要更改的话必须要写单位，我们可以在这里设置延时触发，可以使用浮点秒数。可选参数，当你只想写何时开始而不写运动曲线是不行的，当只想改动何时开始的时候，前面要给一个ease

很像pyqt5中的动画组 91.动画的简单使用_Suyuoa的博客-CSDN博客

我们做一个例子，我们现在有一个青色的盒子，我现在想让他在鼠标移动上去的时候用5s时间变为橙色

• 哪一个元素做过渡效果，transition就给谁

刚开始打开后是这样的

放了一会儿是这样的

最后是这样的

那么如果你想同时改多个属性，你要这样写

现在打开后是这样的

放了一会儿是这样的

最后是这样的

这样写其实很麻烦，我们现在只有两个，以后多个的时候会很麻烦，所以如果需要多个属性变化，我们一般将属性写成all，然后在hover(或别的什么状态)中控制要变化的属性

经测试同样可以实现过渡效果

这样写的缺点就是不能控制每一个属性的具体过渡参数(比如时间)了，但实际开发中对时间的要求并不是很多

我们下面搞两个例子

目录

1  简易进度条效果

2  图标切换效果

---

1  简易进度条效果

我们现在使用过渡属性做一个简易的进度条效果

打开后是这样的

鼠标放上去一会儿是这样的

放5s或更长时间之后是这样的

2  图标切换效果

这个实际上是使用精灵图的原理，我现在有这样一张图，它的名字是icons.png

代码是这样的

打开后是这样的

运行过程中是这样的

船会从右侧出来，飞机会从左侧走