怎样使用veloticy-ui生成文字动画-js教程-PHP中文网

首页

web前端

js教程

怎样使用veloticy-ui生成文字动画

php中世界最好的语言

Mar 14, 2018 pm 05:38 PM

特点生成

这次给大家带来怎样使用veloticy-ui生成文字动画，使用veloticy-ui生成文字动画的注意事项有哪些，下面就是实战案例，一起来看一下。

前言

最近要实现一个类似文字波浪线的效果，使用了velocity-ui这个动画库,第一个感觉就是使用简单，代码量少,性能优异,在此简单介绍一下使用方法，并实现一个看上去不错的动画.

具体使用方法可以点击这里

基本使用

要使用 velocity-ui 需要先引入velocity,其中velocity可以是依赖jquery,也可以不依赖jquery，具体看一下下面就行了

//不依赖jquery，第一个参数为原生js的dom选择器
Velocity(document.getElementById("dummy"), {
 opacity: 0.5
}, {
 duration: 1000
});
// 使用 jQuery 或 Zepto 时
$("#dummy").velocity({
 opacity: 0.5
}, {
 duration: 1000
});

登录后复制

可以看出在使用jquery时,velocity的基本使用就像jquery的animate,引入 velocity-ui 的

目的就是提供一些已经定义好的动画(指令),有一点像Animate.css这样的动画库,但是可以提供

更细致的控制,

基本配置项

$element.velocity({
 width: "500px", // 动画属性 宽度到 "500px" 的动画
 property2: value2 // 属性示例
}, {
 /* Velocity 动画配置项的默认值 */
 duration: 400,  // 动画执行时间
 easing: "swing", // 缓动效果
 queue: "",  // 队列
 begin: undefined, // 动画开始时的回调函数
 progress: undefined, // 动画执行中的回调函数（该函数会随着动画执行被不断触发）
 complete: undefined, // 动画结束时的回调函数
 display: undefined, // 动画结束时设置元素的 css display 属性
 visibility: undefined, // 动画结束时设置元素的 css visibility 属性
 loop: false,  // 循环
 delay: false,  // 延迟
 mobileHA: true  // 移动端硬件加速（默认开启）
});
width: ["500px", "300px"]//这样设置后面的300px会作为初始默认值
width: ["500px", "spring"，"300px"]//这样可以为单个属性指定缓动函数
width: function (index, total) {}//对集合对象可以设置不同的属性值

登录后复制

可以看出velocity也可以设置quequ,使用和animate是一致的,而且velocity自身提供一些指令来实现动画,有fadeIn/fadeOut, slideUp/slideDown,

scroll,finish,reverse,除此以外velocity实现了对transform, color这些属性动画的支持,并支持SVG和promise,具体使用可以看上面链接的文档。

velocity-ui 除了提供更多的指令外,还提供了两个方法 RunSequence 和 RegisterEffect(非jquery可以去掉$.,把jquery换为原生DOM)

// 将嵌套动画序列储存到一个数组里，很清晰的显示了它们的执行顺序
var mySequence = [
 { e: $element1, p: { translateX: 100 }, o: { duration: 1000 } },
 { e: $element2, p: { translateX: 200 }, o: { duration: 1000 } },
 { e: $element3, p: { translateX: 300 }, o: { duration: 1000 } }
];
// 调用这个自定义的序列名称 还可以在其他地方复用
$.Velocity.RunSequence(mySequence);
// name：动画特效名称 为字符串类型
// defaultDuration：默认动画执行时间 单位为毫秒(ms)
// calls：动画队列数组，property - 动画属性，durationPercentage - 当前动画所占总时间的百分比 (写成浮点数)，option - 选项
// reset：设置元素在动画开始时的初始值
$.Velocity.RegisterEffect(name, {
 defaultDuration: duration,
 calls: [
 [ { property: value }, durationPercentage, { options } ],
 [ { property: value }, durationPercentage, { options } ]
 ],
 reset: { property: value, property: value }
});

登录后复制

除了以上两个函数外,还提供了3个额外的options属性

stagger 可以让集合对象依次错开一段时间执行动画

drag 可以让集合对象的最后一个元素有缓冲效果

backwards 可以让集合对象从最后一个元素往前依次错开一段时间执行动画

下面就利用 RegisterEffect 和 stagger 实现一个简单的文字动画

实现一个自定义动画

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <meta name="renderer" content="webkit">
 <title>Document</title>
</head>
<body>
 <h1 id="J_Text">segmentfault</h1>
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://cdn.bootcss.com/velocity/1.5.1/velocity.min.js"></script>
 <script src="https://cdn.bootcss.com/velocity/1.5.1/velocity.ui.min.js"></script>
 <script>
 jQuery(function ($) {
 $.Velocity.RegisterEffect('custom', {//注册一个叫'custom'自定义动画
 defaultDuration: 1500,
 calls:[
  [{
  rotateY: 360,
  translateY: '-=15',
  }, 0.5],
  [{
  translateY: '+=15',
  }, 0.5]
 ], 
 })
 $('#J_Text').css({
 fontSize: 40,
 color: '#333',
 }) .html(function () {
  return $(this).text().split('').map(function (char) {
 return '<span>' + char + '</span>'; //让每字符被span元素包裹
 }).join('');
 }).find('span')
 .filter(function (index) {
 return index > 6
 }).css('color', '#009A63').end() //让后面几个字符变为绿色
 .css({
 position: 'absolute',
 left: function (index) {
  return index * 20; //设置字符的间隔
 }
 })
 .velocity('custom', { //调用自定义的动画指令
 stagger: 300,
 delay: 1000, 
 })
 })
 </script>
</body>
</html>

登录后复制

除去一些字符的操作,可以看出实现一个看似复杂的动画只需简单设置calls 和stagger属性的值就可以了,这个gif在循环播放那个动画,实际上这个动画只执行了一次，大家可以思考一下怎么实现整个队列的循环

最后

velocity内部由于对动画方面进行了优化，所以性能方面比jquery的animate要好，甚至比css的transition还要出色,当然这个我没有测试过，大家可以测试一下。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

热AI工具

热工具

热门话题

Java教程

1660

CakePHP 教程

1417

Laravel 教程

1311

PHP教程

1261

C# 教程

1234

显示更多

Related knowledge

ppt怎么做圆形的图片和文字 Mar 26, 2024 am 10:23 AM

首先，在 PPT 中绘制一个圆圈，然后插入一个文本框，输入文字内容。最后，设置文本框的填充和轮廓为无，即可完成圆形图片和文字的制作。

word中怎么给文字加点？ Mar 19, 2024 pm 08:04 PM

我们在日常制作Word文档时,有时需要给文档中的某些文字下方加点,尤其是出试题的时候。来用于重点突出这部分内容,小编给大家分享下word中怎么给文字加点的技巧，希望能帮助到您。1.打开一个空白word文档。　　2.举个例子比如给“如何给文字加点”几个字的下面加上点。　　3.我们先把“如何给文字加点”几个字用鼠标左键选择了，注意以后你想给那个字加点就先用鼠标的左键选择哪个字。今天我们给这几个字都加点，所以几个字都选择了。选中这几个字后右击，在弹出来的功能框中点击字体。　　4.然后就会出现一个这样的

如何使用Python生成两个日期之间的k个随机日期？ Sep 09, 2023 pm 08:17 PM

生成随机数据在数据科学领域非常重要。从构建神经网络预测、股市数据等来看，通常都会将日期作为参数之一。我们可能需要在两个日期之间生成随机数以进行统计分析。本文将展示如何生成两个给定日期之间的k个随机日期使用随机和日期时间模块日期时间是Python内置的处理时间的库。另一方面，随机模块有助于生成随机数。因此，我们可以结合随机和日期时间模块来生成两个日期之间的随机日期。语法random.randint(start,end,k)这里的random指的是Python随机库。randint方法采用三个重要的

Golang图片处理：学习如何添加水印和文字 Aug 17, 2023 am 08:41 AM

Golang图片处理：学习如何添加水印和文字引言：在现代数字化和社交媒体的时代，图片处理已经成为了一项重要的技能。无论是个人使用还是商务运营，添加水印和文字都是常见的需求。在本文中，我们将探讨使用Golang进行图片处理的方法，学习如何添加水印和文字。背景：Golang是一门开源的编程语言，以其简洁的语法、高效的性能和强大的并发能力而闻名。它已经成为许多开发

如何修改图片上的文字 Aug 29, 2023 am 10:29 AM

修改图片上的文字可以通过使用图片编辑软件、在线工具或截图工具来实现。其具体步骤为：1、打开图片编辑软件并导入需要修改文字的图片；2、选择文字工具；3、单击图片上的文字区域，以创建一个文本框；4、在文本框中输入您想要的新文字；5、如果只是想删除图片上的文字，可以使用橡皮擦工具或选择工具来选择并删除文字区域。

如何使用PHP生成可刷新的图片验证码 Sep 13, 2023 am 11:54 AM

如何使用PHP生成可刷新的图片验证码随着互联网的发展，为了防止恶意攻击和机器自动操作现象，很多网站都使用了验证码来进行用户验证。其中一种常见的验证码类型就是图片验证码，通过生成一张包含随机字符的图片，要求用户输入正确的字符才能进行后续操作。本文将介绍如何使用PHP生成可刷新的图片验证码，并提供具体的代码示例。步骤一：创建验证码图片首先，我们需要创建一个用于生

如何使用PHP进行基本的自然语言生成 Jun 22, 2023 am 11:05 AM

自然语言生成是一种人工智能技术，它能够将数据转换为自然语言文本。在当今的大数据时代，越来越多的业务需要将数据可视化或呈现给用户，而自然语言生成正是一种非常有效的方法。PHP是一种非常流行的服务器端脚本语言，它可以用于开发Web应用程序。本文将简要介绍如何使用PHP进行基本的自然语言生成。引入自然语言生成库PHP自带的函数库并不包括自然语言生成所需的功能，因此

使用Python中的pyWaffle生成一个华夫饼图 Aug 17, 2023 am 11:49 AM

数据可视化对于高效的信息理解和展示至关重要。在众多可用的图表类型中，华夫饼图以方形瓦片在网格状结构中显示数据的新颖方式。强大的Python模块PyWaffle方便了华夫饼图的开发，类似于许多计算和数据分析方法。在本文中，我们将看看如何使用复杂的Python模块PyWaffle创建华夫饼图。让我们安装PyWafle并看看如何使用它来可视化分类数据。在您的cmd中运行以下命令来安装该库，然后将其导入到您的代码中pipinstallpywaffleExample1的中文翻译为：示例1在这个例子中，我们

See all articles

怎样使用veloticy-ui生成文字动画

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题