animate-util v1.0.22

动画集成说明

TOC

引入

# yarn安装
yarn add animate-util

使用scss自定义函数@function或@mixin混入，在使用时只需要在对应的类中引入即可。需配置全局变量文件路径 (推荐) 或者引入样式文件：

配置全局scss变量需安装sass-resources-loader： npm install --save-dev sass-resources-loader

在Webpack中配置：

// 在vue.config.js中添加配置：
module.exports = {
	...,
	// 配置全局scss变量
    chainWebpack: (config) => {
        const oneOfsMap = config.module.rule('scss').oneOfs.store;
        oneOfsMap.forEach((item) => {
        	item.use('sass-resources-loader')
        		.loader('sass-resources-loader')
        		.options({
        			// 若是多个文件，改为数组方式传入
        			// resources: ['file1.scss', 'file2.scss'],
        			resources: './src/styles/commonVariate.scss',
        		}).end();
        });
    },
};

// 在单个样式文件中引入：
@import 'commonAnimate';

在Vite中配置：

import { UserConfigExport } from 'vite'

export default (): UserConfigExport => {
    return {
        ...,
        css: {
          // css预处理器
          preprocessorOptions: {
            scss: {
              // 定义全局的scss变量
              // 给导入的路径最后加上;
              additionalData: `@import '@/styles/commonVariate.scss';`
            }
          }
        },
    }
}

在全局scss中引入：

//  commonVariate.scss
@use 'animate-util/styles/common-animate.scss' as *;

或

//  commonVariate.scss
@import '~animate-util/styles/common-animate.scss';

使用场景

1、element-ui部分组件动画效果增强

使用场景：同element-ui

触发方式：用户主动触发

1. el-switch动画效果增强

   .el-switch {
       $color: #fff;
       $activeColor: get-color(primary);
       $inactiveColor: get-color(danger);
       @include switch-animate1($color, $activeColor, $inactiveColor);
   }
   .el-switch {
       @include switch-animate2();
   }

   参数	说明	是否必传	默认值
   $color	文字颜色	否	#fff(白色)
   $activeColor	激活时的背景色	否	#409EFF(element-ui主题蓝色)
   $inactiveColor	非激活时的背景色	否	#909399(element-ui默认灰色)

   样例地址：el-switch动画效果 (codepen.io)

2. el-checkbox动画效果增强

   .el-checkbox {
       @include checkbox-animate();
   }

   样例地址：el-checkbox动画效果 (codepen.io)

3. el-link动画效果增强

   .el-link {
       @include link-animate();
   }

   样例地址：el-link动画效果 (codepen.io)

2、鼠标悬浮/按下

使用场景：可交互的链接、按钮或图标等

触发方式：用户主动触发

.test-btn {
    $baseColor: get-color(primary);
	@include transition-color(background-color, $baseColor);
}
.test-text {
    $font-color: get-color(danger);
	@include transition-color(color, $fontColor);
}

样例地址：transition-color (codepen.io)

3、图标按钮悬浮文字说明

使用场景：单个图标按钮或多个图标按钮组，鼠标悬浮时需要显示文字说明，可选用此动画效果。

触发方式：用户主动触发

.button {
    $text: 'xx事件';
    $height: 60px;
    $bgColor: '#f00';
    $color: '#fff';
    @include tip($text, $height, $bgColor, $color);
}

批量设置：

.button {
    $height: 60px;
    $colorArr: '#409EFF', '#67C23A', '#E6A23C', '#909399';
    $btnText: '跌倒事件', '井盖移位事件', '积水事件', '消防占道事件';
    @include btn-group($height, $colorArr, $btnText);
}

样例地址：hover-tag (codepen.io)

4、带步骤条的表单切换

使用场景：包含步骤条和多个表单，需要进行前后表单切换时，可选用此动画效果。

触发方式：用户间接触发

// 在表单元素组的容器上设置
.animate-step {
    @include animate-step('form-view');
}

import { AnimateUtil } from 'animate-util' // 引入动画工具类
...
data() {
    return {
        active: 0; // 当前步骤
    };
},
methods: {
    /**
    * @description: 下一步
    */
    next() {
    	animateUtil.stepToNext(this.active, 'form-view');
    	this.active += 1;
    },
    /**
    * @description: 上一步
    */
    prev() {
        animateUtil.stepToPrev(this.active, 'form-view');
    	this.active -= 1;
    }
}

样例地址：步骤条表单动画 (codepen.io)

5、悬浮按钮动画

使用场景：鼠标悬浮在容器上才出现按钮的场景。

触发方式：用户间接触发

// 在按钮出现的容器上设置
.card {
    $colors: get-color(primary), get-color(danger);
    $className: 'icon-btn';
    @include hover-icon($colors, $className);
}

样例地址：悬浮按钮动画 (codepen.io)

6、呼吸灯动画

触发方式：系统触发/用户主动触发

.breathing-light {
    @include breathing-light(get-color(success));
}

样例地址：呼吸灯效果 (codepen.io)

7、文字摇晃动画

触发方式：用户简介触发

<div class="shake-text">测试文字测试文字测试文字测试文字</div>

import { AnimateUtil } from 'animate-util' // 引入动画工具类
...
const text = document.querySelector('.shake-text');
animateUtil.shake(text);

样例地址：文字摇晃动画 (codepen.io)

8、文字切换动画（短文本）

使用场景：用于不换行的较短文本（推荐20长度以内）切换

<!-- 定义好html格式 -->
<div class="main main1">
  <div class="text current"></div>
  <div class="text next"></div>
</div>

/* 定义参数 */
$options: (
  /* 字体大小 */
  font-size: 40px,
  /* 每个字符切换速度 */
  duration: .24s,
  /* 文字颜色 */
  color: #000,
  /* 最大字数 */
  max-length: 15,
  /* 是否使用单个字符动画 */
  single: true,
  /* 汉字高度与数字和英文不一样，如果要切换的文字包含汉字，需要开启此选项 */
  isZh: false,
);

/* 引入样式 */
.main {
  @include text-switch($options) {
    /* 可追加自定义样式 */
    font-weight: bold;
  };
}

import { TextSwitchUtil } from 'animate-util' // 引入动画工具类

// 初始化工具
const textSwitchUtil = new TextSwitchUtil({
  mainClassName: 'main1' // 定义容器类名
});

// 自动切换,切换时间间隔为2000ms
const textArr = ['111111111', '222222222', '333333333', '444444444', '555555555'];
textSwitchUtil.textArrSwitch(textArr, 2000);

// 手动切换
const currentText = 'init';
textSwitchUtil.init(currentText);
...
const nextText = 'next';
textSwitchUtil.doNext(nextText);

数字的切换（没有变化的数字将不会有切换动画）：

import { TextSwitchUtil } from 'animate-util' // 引入动画工具类

// 初始化工具
const textSwitchUtil = new TextSwitchUtil({
  mainClassName: 'main1' // 定义容器类名
  isNumber: true, // 数字类型的切换
});

let number = 0;
textSwitchUtil.init(number);
...
number = 100;
textSwitchUtil3.doNext(number);

样例地址：短文本文字切换动画 (codepen.io)

9、进入/退出窗口动画

使用场景：从窗口外进入/离开

<!-- 定义好html格式 -->
<div class="translate-view">
  <div class="close-btn"></div>
  <div class="translate-box"></div>
</div>

/* 定义参数 */
$options: (
    /* 执行动画的元素类名 */
    box-class-name: 'translate-box',
    /* 打开按钮类名 */
    btn-class-name: 'close-btn',
    /* 动画出现方向(left/right) */
    origin: left,
    /* 动画持续时间 */
    duration: 300ms
);
/* 引入样式 */
.translate-view {
    @include hidebox($options);
}

import { AnimateUtil } from 'animate-util' // 引入动画工具类

...
// 传入外部容器
const view = document.querySelector('.translate-view');
// 打开
AnimateUtil.openBox(view);
// 关闭
AnimateUtil.closeBox(view);

样例地址：开窗动画 (codepen.io)

在动画过程中切换动画

​ 通常情况下，在动画运行过程中直接使用css切换动画，会导致动画过渡不自然，产生割裂感。某天在外网的一篇文章中找到了一个解决方案。

文章地址：hacking-css-animation-state-and-playback-time(css-tricks)

// 定义一个变量用于记录动画进度
@property --animate-progress {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}

// 旋转动画
@keyframes rotate {
  0% {
    --animate-progress: 0;
    transform: rotate(0deg);
  }
  100% {
    --animate-progress: 1;
    transform: rotate(360deg);
  }
}

// 折返动画
@keyframes rotateBack {
  from {
    --animate-progress: 0;
    transform: rotate(360deg);
  }
  to {
    --animate-progress: 1;
    transform: rotate(0deg);
  }
}

import { AnimateUtil } from 'animate-util' // 引入动画工具类
let duration = '10s'; // 动画持续时间

window.onload = () => {
  const box = view.querySelector('.box');
  doEvent(box, '2s');
  box.onmouseenter = () => {
    duration = '10s';
    doEvent(box, duration);
  }
  box.onmouseleave = () => {
    duration = '2s';
    doEvent(box, duration);
  }
}

/**
 * @description: 开始/切换动画
 * @param {htmlElement} element 进行动画的元素
 * @param {string} duration 动画时长
 */
const doEvent = (element, duration) => {
  let animationName = 'rotate';
  animateUtil.animateProgressCheck({
    animationElement: element,
    animationName,
    animationDuration: duration,
    animationInfinite: true,
  });
}

/**
 * @description: 折返动画
 * @param {htmlElement} element 进行动画的元素
 * @param {string} duration 动画时长
 * @param {boolean} back 是否折返
 */
const doBackEvent = (element, duration, back = false) => {
  let animationName = 'rotate';
  if (back) animationName = animationName === 'rotate' ? 'rotateBack' : 'rotate';
  animateUtil.animateProgressCheck({
    animationElement: element,
    animationName,
    animationDuration: duration,
    animationInfinite: true,
    animationType: 'back'
  });
}

样例地址：切换动画运行速度 (codepen.io)

目前还存在的缺陷：只能实现 animation-timing-function 属性为 linear (线性动画)时的无缝切换。

文章推荐

网络动画的基本规则 |CSS-Tricks - CSS-Tricks

交互体验之微交互深度剖析

UI动画和UX (alistapart.com)

迪士尼的十二个动画原理