%20(2).svg)
项目简介
这是一个基于 JavaScript 和 CSS，借助 ya 库开发的动画生成系统。其目的是为开发者提供便捷的方式来实现网页元素的动态效果，从而提升用户的网页浏览体验。开发者既可以使用丰富的预设动画效果，也能根据自身需求自定义动画。
项目的主要特性和功能
- 预设动画丰富，涵盖淡入淡出、翻转、滑动和缩放等常见动态效果，满足多样需求。
- 支持自定义，用户可编写 CSS 代码创建个性化动画，还能添加自定义的 easing 函数。
- 采用响应式设计，动画效果能根据设备屏幕大小自动调整，适配不同设备。
- 易于使用，提供简洁的 API 接口和详细文档，便于开发者快速上手。
- 兼容性强，与 Chrome、Firefox、Safari 和 Edge 等主流浏览器兼容。
安装使用步骤
安装依赖
下载本项目的源码文件后，在项目根目录下打开终端，执行以下命令安装依赖：
js
yarn install
构建并运行
安装完成后，可通过以下命令进行构建和运行：
js
yarn build // 构建之后会生成 dist 目录，内有 ya.js 和 ya.css
yarn dev // 运行
使用动画
使用模板动画
若要使用现成的模板动画，需要引入 animate.css 和 ya.js，并为元素添加 animateJs 类和动画名（如 animateLoading1、animateLoading2）。示例如下：
```html
```
插件使用方式
使用 animatedClassName 改变 YA 默认行为，将放置在 data-ya 中的 class 类名在页面滚动时生效。示例如下：
```html
```
初始化配置
js
YA.init({
useClassNames: true, // 值为 true，将添加滚动 `data-ya` 内容为 class
initClassName: false, // 初始化后使用的 class 类
animatedClassName: 'animated',// 动画 class
offset: 120, // 从原始触发点的偏移量 (px)
once: false, // 向下滑动时，动画只发生一次
mirror: true, // 滚动到元素上方时是否应设置动画
});
额外添加功能性 class
- 无限循环播放：添加
infinite类。 ```html
- **延迟播放**：添加 `delay-1` 到 `delay-6` 类（0.5s 的倍数）。html
- **修改播放时长**：添加 `faster`（0.5s）、`fast`（0.8s）、`slow`（2s）、`slower`（3s）类。html
- **播放完毕停留在第一帧**：添加 `backwards` 类。html
```
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】