动画及拓展

Seven_drunk

已于 2022-11-03 17:42:14 修改

阅读量203

点赞数 1

分类专栏： vue 文章标签：动画 css3 css

于 2022-10-12 19:27:04 首次发布

本文链接：https://blog.csdn.net/Seven_drunk/article/details/127287340

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

- css样式

transition: transition-property transition-duration transition-timing-function transition-delay;

transition-property：设置元素中参与过渡的属性名称如 width background 必填
transition-duration：设置元素\过渡的持续时间；如1s 必填
transition-timing-function：设置元素过渡的动画类型；
transition-delay：设置过渡效果延迟的时间，默认为 0；
transition-timing-function动画类型如下

以始终相同的速度完成整个过渡过程

值	描述
linear	以始终相同的速度完成整个过渡过程
ease	以慢速开始，然后变快，然后慢速结束的顺序来完成过渡过程
ease-in	以慢速开始过渡的过程
ease-out	以慢速结束过渡的过程
ease-in-out	以慢速开始，并以慢速结束的过渡效果
例子如下：

.transition-property {
			width: 300px;
			height: 300px;
			border: 3px solid black;
			transition-property: width background;
			transition-duration: 3s;
			transition-timing-function: ease;
			transition-delay: 2s;
		}

		.transition-property:hover {
			width: 600px;
			background-color: red;
		}

请添加图片描述

animation动画

创建 CSS 动画，要了解 @keyframes 规则。@keyframes 规则用来定义动画各个阶段的属性值

animationName：表示动画的名称； from：定义动画的开头，相当于 0%；
percentage：定义动画的各个阶段，为百分比值，可以添加多个； to：定义动画的结尾，相当于 100%；
properties：不同的样式属性名称，例如 color、left、width 等等。

 @keyframes ball {
            0% { top: 0px; left: 0px;}
            25% { top: 0px; left: 350px;}
            50% { top: 200px; left: 350px;}
            75% { top: 200px; left: 0px;}
            100% { top: 0px; left: 0px;} 
        }
        div {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 3px solid black;
            position: relative;
            animation-name: ball;
			/* animation-duration:20s; */
        }

注意：要想让动画成功播放，要定义 animation-duration 属性，否则会因为 animation-duration 属性的默认值为 0，导致动画并不会播放
红圈自下往上黑圈自上而下移动例子：

 @keyframes ball{
        	0%{
				opacity: 0;
				transform: translateY(300px);
			}
        	100%{
				opacity: 1;		
			}
        }
		@keyframes ballTwo{
			0%{
				opacity: 0;
				transform: translateY(-150px);
			}
			100%{
				opacity: 1;		
			}
		}
        .one {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 3px solid black;
            position: relative;
            animation-name: ball;
			animation-duration:2s;
			position: relative;
			top: 300px;
        }
		.two {
		    width: 100px;
		    height: 100px;
		    border-radius: 50%;
		    border: 3px solid red;
		    position: relative;
		    animation-name: ballTwo;
			animation-duration:2s;
			animation-delay:2s;
			position: relative;
			top: 300px;
		}

vue —animation

在这里插入图片描述
在进入/离开的过渡中，会有 6 状态；
v-enter-from 、v-enter-active 、v-enter-to 、v-leave-from 、v-leave-active 、v-leave-to【 vue版本3】
v-enter 、v-enter-active 、v-enter-to 、v-leave 、v-leave-active 、v-leave-to 【 vue版本2】

由 v-if 所触发的切换
由 v-show 所触发的切换

为过渡效果命名

可以给组件传一个 name prop 来声明一个过渡效果名

<Transition name="fade">
  ...
</Transition>

对于一个有名字的过渡效果，对它起作用的过渡 class 会以其名字为前缀：
如下图：

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

如果我们可能想要先执行离开动画，然后在其完成之后再执行元素的进入动画，可以使用mode
如果你想在某个节点初次渲染时应用一个过渡效果，你可以添加 appear

<Transition mode="out-in" appear>
  ...
</Transition>

例子如下：

<template>
  <div>
    <button @click="handleAnis">Toggle</button>
    <Transition name="fade" mode="out-in">
      <img v-if="show" key="a" src="https://xa.hw.luckygames.team/casino/images/app/keno80.jpg" />
      <img v-else key="b" src="https://www.hw.luckygames.team/casino/images/app/football.jpg" />
    </Transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true, //是否直接显示默认头像
      roleName: "SEER",
    };
  },

  methods: {
    handleAnis() {
      this.show = !this.show;
    },
  },
};
</script>

<style lang="less" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all 1.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
  transform: translateY(600px);
}
</style>

tween.js
只需告诉它要更改哪些属性，tween完成运行时它们应具有哪些最终值，以及这应该花费多长时间。
例子：

var position = {x: 100, y: 0}

要将值更改为x 100 -> 200

var tween = new TWEEN.Tween(position)
tween.to({x: 200}, 1000)

实际上，这还不会做任何事情.需要启动它

tween.start()

为了尽可能流畅地运行，应该在用于动画制作的同一主循环中调用该函数 //推荐的方法

animate()
function animate() {
	requestAnimationFrame(animate)
	TWEEN.update()  
}

这将负责更新所有活动 1 秒后（即 1000 毫秒）将为 position.x -> 200
使用vue如图：
//最简单的一行展示

  mounted() {
    //初始化动画
    this.initanimate();
    this.startanimate();
  },
  methods: {
    startanimate(time: number) {
      // 为了尽可能流畅地运行，应该在用于动画制作的同一主循环中调用该函数
      //每一帧动画都在变化
      requestAnimationFrame(this.startanimate);
      $Tween.update(time);
    },
    initanimate() {
      const object1 = { opacity: 0, top: 400 };
      //y轴从400 -> 0 运动
      const oneTset: any = this.$refs.oneTset;
      var tween1 = new $Tween.Tween(object1)
        .to({ opacity: 1, top: 400 }, 600)
        //运动方式
        .easing($Tween.Easing.Linear.None)
        .onUpdate(function () {
          oneTset.style.opacity = `${object1.opacity}`;
        //如果没有top==400那么就会在top等于0先展示然后再上移
          var transform = "translateY(" + object1.top + "px)";
          oneTset.style.transform = transform;
        });

      const object = { y: 400 };
      var tween2 = new $Tween.Tween(object)
        .to({ y: 0 }, 1000)
        //运动方式
        .easing($Tween.Easing.Linear.None)
        .onUpdate(function () {
          // console.log(object.y);
          var transform = "translateY(" + object.y + "px)";
          oneTset.style.transform = transform;
        });
      let anis = tween1.chain(tween2);
      anis.start();
    },

动画先出现然后在逐渐上移
我的需求是先显示再逐渐上移如果chain的时候第一步只有透明度，第二步上移那么会先显示然后再从底部上移，不符合需求。我应该先显示透明度，top就在要上移的最初位置（那么就算我使用了translate也不会有移动的效果，也可以达到我最终的需求）
需求：第一行在指定位置显示，然后上移一定位置。出现第二行在指定位置显示，然后上移一定位置
//多行展示

<template>
  <div class="">
    <div class="my-tween" ref="oneTset">你好</div>
    <div class="my-tween" ref="twoTset">xxxxx</div>
  </div>
</template>

<script lang="ts">
import $Tween from "@tweenjs/tween.js";
export default {
  data() {
    return {};
  },

  mounted() {
    //获取第一行文字
    const oneTset = this.$refs.oneTset;
    //获取第二行文字
    const twoTset = this.$refs.twoTset;
    //初始化动画 拿到tw1
    let tw1 = this.initanimate(oneTset as HTMLDivElement);
    let tw2 = this.initanimate(twoTset as HTMLDivElement);
    // 为了让第一行上移结束和第二行的显示连起来
    tw1.tween2.chain(tw2.tween1);
    tw1.tween1.start();
    this.startanimate();
  },
  methods: {
    startanimate(time: number) {
      // 为了尽可能流畅地运行，应该在用于动画制作的同一主循环中调用该函数
      //每一帧动画都在变化
      requestAnimationFrame(this.startanimate);
      $Tween.update(time);
    },
    initanimate(oneTset: HTMLDivElement) {
      const object1 = { opacity: 0, top: 400 };
      //显示
      var tween1 = new $Tween.Tween(object1)
        .to({ opacity: 1, top: 400 }, 600)
        //运动方式
        .easing($Tween.Easing.Linear.None)
        .onUpdate(function () {
          oneTset.style.opacity = `${object1.opacity}`;
          var transform = "translateY(" + object1.top + "px)";
          oneTset.style.transform = transform;
        });
      //上移 y轴从400 -> 0 运动
      const object = { y: 400 };
      var tween2 = new $Tween.Tween(object)
        .to({ y: 0 }, 1000)
        //运动方式
        .easing($Tween.Easing.Linear.None)
        .onUpdate(function () {
          var transform = "translateY(" + object.y + "px)";
          oneTset.style.transform = transform;
        });
      // tween1.chain(tween2)是为了让每一行的文字  显示及上移 链起来
      let anis = tween1.chain(tween2);
      //返回出{ tween1, tween2 }是为了让第一行结束和第二行的显示连起来
      return { tween1, tween2 };
    },
  },
};
</script>
<style lang="css" scoped>
.my-tween {
  opacity: 0;
}
</style>

动画插件 ScrollReveal

  <template>
  <div class="anisClue">1111111</div>
  </template>
  <script>
   ScrollReveal().reveal(".anisClue", {
        origin: "bottom", // 动画开始的方向
        distance: "300px", //移动距离
        duration: 1000, // 动画持续时间
        delay: 0, // 延迟
        rotate: { x: 0, y: 0, z: 0 }, // 过度到0的初始角度，关键点想要酷炫的样式主要修改此参数
        opacity: 0, // 初始透明度
        scale: 0.8,
        viewOffset: {
          //可看到的范围，全屏往里缩
          top: 150,
          right: 0,
          bottom: 150,
          left: 0,
        },
        //当动画开始之前会被触发
        beforeReveal: function(domEl){
            console.log('动画执行了');
        },
        //动画开始之后会被触发
        afterReveal: function(domEl){
            console.log('动画结束了');
        },
      });
 </script>