前端动画技术Animations和Transition

前端动画技术Animations和Transition

Animations（动画）

Animations（动画）是一种CSS3技术，可以创建复杂的动画效果。与Transitions相比，Animations更加灵活，可以在任意时刻控制动画的进度和状态。
Animations（动画）通过设置animation属性，并结合@keyframes（关键帧）定义的动画序列，来实现对页面元素的动画效果。

常用的Animations属性

1. animation-name：动画的名称

2. animation-duration：动画的持续时间，单位为秒或毫秒

3. animation-timing-function：动画的时间函数，用于控制动画的进度曲线，animation-timing-function有：

   • ease 默认的时间函数，动画缓慢开始、然后逐渐变快，最后缓慢结束。通常被用于平滑的过渡效果。
   • linear 恒定的速度播放 近似cubic-bezier(0, 0, 1, 1)
   • ease-in 缓慢开始，先慢后快 近似cubic-bezier(0.42, 0, 1, 1)
   • ease-out 缓慢结束，先快后慢 近似cubic-bezier(0, 0, 0.58, 1)
   • ease-in-out 缓慢开始、逐渐加速、缓慢结束 近似cubic-bezier(0.42, 0, 0.58, 1)
   • 自定义时间函数，可以通过cubic-bezier()来定义一个贝塞尔曲线，例如：animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);其中参数0.1、0.7、1.0和0.1分别表示贝塞尔曲线的四个点的坐标值。通过调整这些参数，可以实现更加复杂的动画效果。

4. animation-delay:动画延迟的时间，单位为秒或毫秒

5. animation-iteration-count：动画的循环次数，可以指定具体的数字，也可以使用infinite表示无限循环。

6. animation-direction：动画的方向，可以是normal（默认值）、reverse（反向播放）、alternate（交替正向和反向播放）或alternate-reverse（交替反向和正向播放）。

7. animation-fill-mode：动画结束后元素的状态，可以是none（默认值）、forwards、backwards或both。

• none 默认值，动画结束后元素会回到初始状态，即不保留动画效果的任何变化
• forwards：动画结束后元素会保持动画的最后一帧的状态。换句话说，元素将停留在动画的最终状态，而不会回到初始状态。
• backwards：表示在动画播放之前（在动画开始之前）元素将应用动画的初始状态。元素会立即跳转到动画的第一帧状态，然后再开始播放动画。
• both：表示动画结束后元素同时应用forwards和 backwards的效果。元素首先会应用动画的初始状态，然后播放动画并保持在最后一帧的状态

8. animation-play-state：动画的播放状态，可以是running（运行）或paused（暂停）。

常见的Animations简写语法

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;
animation: 动画名 持续时间 速度曲线 延迟时间 循环次数 运动方向 结束后的状态 播放状态;

注意：其中顺序不固定，animation-duration和animation-name是必需的，如果同时指定了animation-delay和animation-duration，通常情况下先写animation-duration。

关键帧的定义方式

方式一：from和to关键字

@keyframes animation-name {
  from {
    /* 初始状态样式 */
  }
  to {
    /* 结束状态样式 */
  }
}

方式二：百分比

@keyframes animation-name {
  0% {
    /* 初始状态样式 */
  }
  50% {
    /* 中间状态样式 */
  }
  100% {
    /* 结束状态样式 */
  }
}

Animations的使用示例

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: rotate;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

<i-ep-warn-triangle-filled ref="logo" @click="handleNews" style="color: brown; width: 40px;" :class="{ blink: disabled }" />

const disabled = ref(false)
/**标记全部已读*/
function handleMarkAllAsRead() {
  setMessageRead().then(
    (response) => {
      proxy.$modal.msgSuccess("全部已读");
      disabled.value = false;//logo停止闪烁
      isAllRead.value = true;//修改颜色
    }
  );
}
.blink {
  // animation: blink 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  animation: blink 0.8s ease-in infinite;
  transform: scale(1) translate3d(0, 0, 0);
}

@keyframes blink {

  0%,
  100% {
    opacity: 0.3;
    transform: scale(1) translate3d(-4px, 0, 0);
  }

  50% {
    opacity: 1;
    transform: scale(1.2) translate3d(4px, 0, 0);
  }
}

实现效果如下：
只闪动和缩放

animation动画

闪动缩放平移

animation动画

补充：transform 属性与 scale() 函数结合使用时，可以实现元素的放大缩小效果
与 translate3d() 函数结合使用时，可以实现元素的平移效果
与 rotate() 函数结合使用时，可以实现元素的旋转效果
与 skew() 函数结合使用时，可以实现元素的倾斜效果

使用示例

<script setup>
import e_2 from '/src/assets/e_2.png'
</script>

<template>
    <img :src="e_2" alt="" class="circle_img">
</template>

<style scoped>
.circle_img {
  animation: round 10s linear infinite;
}

@keyframes round {
  0% {
    transform: rotate(0deg);
  }
  
  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>

效果如下：

bandicam

使用示例

Transitions（过渡）

常用的Transitions属性

1. transition-property：需要过渡的CSS属性

   • none 不对任何属性进行过渡
   • all 对元素所有属性进行过渡，包括宽度、高度、颜色、背景等。
   • propety 只对指定的属性进行过渡，多个属性以逗号隔开。

2. transition-duration：过渡的持续时间。

3. transition-timing-function：过渡的时间函数。同animation-timing-function

4. transition-delay：过渡的延迟时间

常见的Transitions简写语法

transition: property duration timing-function delay;

Transitions的使用示例

.button {
  background-color: blue;
  transition: background-color 0.3s ease-in-out;
}

.button:hover {
  background-color: red;
}

指定了background-color属性的过渡效果，持续时间为0.3秒，时间函数为ease-in-out。当鼠标悬停在按钮上时，background-color属性的值将从蓝色过渡到红色，过渡效果平滑。