JavaScript--＞应用animate()函数实现灯笼浮动动画（多个动画同时调用）

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量986 收藏 1
点赞数 3
分类专栏： JavaScript 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_73975532/article/details/134230613
版权

一.知识目录

  1. css动画实现
  2. 伪元素 ::before & ::after 的生效
  3. js封装动画
  4. js向样式表中追加样式

二.css动画实现 

1.简要说明

(ฅ´ω`ฅ)简单说明一下，咱们这里以一个灯笼浮动的动画作为示例，录了两个不同效果：

从咱们的演示gif中可以看到，动画中主要有两个效果：

①呼吸灯效果

②浮动效果

2.html、css代码展示

( ˘ ³˘)♥划重点  ⇨  css部分是我们用js封装动画的参照对象，一般我们的动画效果都是先通过css实现后再进行封装移动!!!

先来看演示一实现的代码部分：

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
            /* 前面这一部分样式是我们定义的按钮样式 */
			#container {
				width: 150px;
				height: 50px;
				line-height: 50px;
				border-radius: 10px;
				font-size: 20px;
				font-weight: bold;
				position: relative;
				color: #fff;
                /* 设置径向渐变背景颜色 -- 渐变色在CSS中被定义成了 image 类型,不能使用background-color */
				background: radial-gradient(circle, rgba(118, 174, 241, 1) 0%, rgba(247, 150, 192, 1) 100%);
				cursor: pointer;
				margin: 300px 200px;
				border: 1px solid aqua;
			}

            #container:hover {
				font-size: 20px;
				color: #f71;
				background: radial-gradient(circle, rgba(247, 150, 192, 1) 0%, rgba(118, 174, 241, 1) 100%);
			}

            /* 后面是我们要添加的css样式包含动画部分 */

		</style>
	</head>
	<body>
		<button id="container">随乔木凉夏
            <!-- 这个span标签将作为灯笼的载体 -->
			<span class="particle"></span>
		</button>
	</body>
</html>

CSS(包含动画部分)

/* 设置span标签样式 */
.particle {
	opacity: 1;
	width: 25px;
	height: 25px;
	display: block;
	top: -25px;
	left: -5px;
	border-radius: 100px;
	position: absolute;
    /* 设置径向渐变背景颜色 -- 渐变色在CSS中被定义成了 image 类型,不能使用background-color */
	background: radial-gradient(rgba(255, 255, 0, 0.5) 50%, transparent 70%);
	background-size: cover;
	background-repeat: no-repeat;

	/* 设置多个动画时 -- 不同动画属性之间用逗号隔开 */
	animation-name: breathe, shiver;
	/* 动画名称 */
	animation-duration: 1s, 12s;
	/* 持续时间 */
	animation-iteration-count: infinite, infinite;
	/* 循环次数 */
	animation-direction: alternate, alternate;
	/* 动画方向 */
	animation-fill-mode: backwards, backwards;
	/* 填充模式 */
	animation-play-state: running, running;
	/* 播放状态 */

	/* 简化写法 --  动画名称 | 持续时间 | 定时函数 | 循环次数 | 播放状态 */
	/* animation: hearts 8s ease-in infinite paused; */
}

/* hover效果可以实现动画播放状态切换  paused-暂停 running-运动 */
#container:hover .particle {
	display: block;
	animation-play-state: running, running;
}

/* 伪元素 ::before & ::after 的生效，必须要有 content 属性 */
/* ::before -- 在元素前插入内容 */
/* ::after -- 在元素后插入内容 */
/* 双冒号 CSS3 语法 */
/*（单冒号）CSS2 过时语法 (仅用来支持 IE8) */
.particle:after {
	position: absolute;
	content: "";
	background-image: url(./lantern.png);
	background-size: 100% 100%;
	border-radius: 100px;
	top: 0px;
	right: 0px;
	width: 25px;
	height: 25px;
	/* background-color: #f71; */
}

/* 浮动动画效果 */
@keyframes shiver {
	0% {
		opacity: 0;
		transform: translate(2px, -2px);
	}

	10% {
		transform: translate(2px, -2px);
	}

	20% {
		opacity: 1;
		transform: translate(1px, -1px);
	}

	30% {
		transform: translate(2px, -2px);
	}

	40% {
		transform: translate(2px, -1px);
	}

	50% {
		transform: translate(2px, 2px);
	}

	60% {
		transform: translate(-1px, -1px);
	}

	70% {
		transform: translate(2px, -2px);
	}

	80% {
		transform: translate(1px, -1px);
	}

	90% {
		transform: translate(2px, -1px);
	}

	100% {
		transform: translate(2px, -2px);
	}
}

/* 呼吸灯动画效果 */
@keyframes breathe {
	0% {
		box-shadow: 0 1px 10px rgba(255, 255, 0, 0.4), 0 1px 5px rgba(255, 255, 0, 0.1) inset;
	}

	100% {
		box-shadow: 0 1px 10px #ffff00, 0 1px 5px #ffff00 inset;
	}
}

演示二实现的代码部分(HTML与演示一一致):

CSS(包含动画部分)

/* 设置span标签样式 */
.particle {
	opacity: 1;
	width: 25px;
	height: 25px;
	display: block;
	top: -25px;
	left: -5px;
	border-radius: 100px;
	position: absolute;
	/* 设置径向渐变背景颜色 -- 渐变色在CSS中被定义成了 image 类型,不能使用background-color */
	background: radial-gradient(rgba(255, 255, 0, 0.5) 50%, transparent 70%);
	background-size: cover;
	background-repeat: no-repeat;

	/* 设置多个动画时 -- 不同动画属性之间用逗号隔开 */
	/* 动画名称 */
	animation-name: float, breathe;
	/* 持续时间 */
	animation-duration: 8s, 1s;
	/* 循环次数 */
	animation-iteration-count: infinite, infinite;
	/* 动画方向 */
	animation-direction: alternate, alternate;
	/* 填充模式 */
	animation-fill-mode: backwards, backwards;
	/* 播放状态 */
	animation-play-state: running, running;

	/* 简化写法 --  动画名称 | 持续时间 | 定时函数 | 循环次数 | 播放状态 */
	/* animation: hearts 8s ease-in infinite paused; */
}

/* hover效果可以实现动画播放状态切换  paused-暂停 running-运动 */
#container:hover .particle {
	display: block;
	animation-play-state: running, running;
}

/* 伪元素 ::before & ::after 的生效，必须要有 content 属性 */
/* ::before -- 在元素前插入内容 */
/* ::after -- 在元素后插入内容 */
/* 双冒号 CSS3 语法 */
/*（单冒号）CSS2 过时语法 (仅用来支持 IE8) */
.particle:after {
	position: absolute;
	content: "";
	background-image: url(./lantern.png);
	background-size: 100% 100%;
	border-radius: 100px;
	top: 0px;
	right: 0px;
	width: 25px;
	height: 25px;
	/* background-color: #f71; */
}

/* 浮动动画效果 */
@keyframes float {
	0% {
		opacity: 0;
		transform: scale(1) translate(0, 0%);
	}

	20% {
		opacity: 0.8;
		transform: scale(0.7) translate(20%, -20%);
	}

	100% {
		opacity: 1;
		transform: scale(0.4) translate(800%, -800%);
	}
}

/* 呼吸灯动画效果 */
@keyframes breathe {
	0% {
		box-shadow: 0 1px 10px rgba(255, 255, 0, 0.4), 0 1px 5px rgba(255, 255, 0, 0.1) inset;
	}

	100% {
		box-shadow: 0 1px 10px #ffff00, 0 1px 5px #ffff00 inset;
	}
}

三.伪元素 ::before & ::after 的生效

我这里再把::before & ::after 这两个伪元素拎出来单独强调一下：

/* 伪元素 ::before & ::after 的生效，必须要有 content 属性 */
/* ::before -- 在元素前插入内容 */
/* ::after -- 在元素后插入内容 */
/* 双冒号 CSS3 语法 */
/*（单冒号）CSS2 过时语法 (仅用来支持 IE8) */

(它们两个可以实现同样的效果  --  很多按钮特效就是通过它们两实现的)

更多具体的用法可以自行查看官方文档：

::after (:after)用法

::before (:before)用法

代码中涉及的background背景渐变颜色，文档链接我也放这，大家可以自行查看：

使用 CSS 渐变

四.js封装动画

( ͡° ͜ʖ ͡°)✧敲黑板，重点来啦~

先贴上完整js代码(lantern.js)，用魔法打败魔法  ⇩

function Animate_options(duration) {
	// 定义动画配置项
	const options = {
	    // 动画执行次数 Infinity-一直循环  CSS中使用infinite
	    iterations: Infinity,
	    // 动画开始时间点
	    iterationStart: 0,
	    // 动画开始之前的延迟
	    delay: 0,
	    // 动画结束之后的延迟
	    endDelay: 0,
	    // 动画运行方向 normal-正向播放 reverse-反向播放 alternate-正向和反向之间交替播放 alternate-reverse-反向和正向之间交替播放
	    direction: 'alternate',
	    // 动画时长  --  在 CSS 中更常使用 s 也就是秒，而在 JS 中更倾向使用 ms 毫秒，在 Web Animation API 中使用的也是毫秒单位
	    duration: duration,
	    // 动画填充模式 none-动画未执行时不应用任何样式 backwards- 动画结束恢复到原始状态（这是默认状态）  forwards- 动画结束保持最终状态
	    fill: 'backwards',
	    // 动画缓动类型  --  CSS3 默认的缓动类型是 ease ，.animate() 默认的缓动类型是 linear 线性的
	    easing: 'ease-in-out',
		// 多个animate调用同时执行 -- 不进入队列，立刻执行
		queue:false,
	};
	return options
}

// 呼吸灯动画效果配置项
const Streamer_options = Animate_options(1000)
// 演示一浮动动画效果配置项
const Lantern_options = Animate_options(12000)
// 演示二浮动动画效果配置项
const Lantern_options_2 = Animate_options(8000)

// 定义呼吸灯动画关键帧   offset -- 设置时间轴(0~1)
const Streamer_keyframes = [
    { 'box-shadow': '0 1px 20px rgba(255, 255, 0, 0.4), 0 1px 10px rgba(255, 255, 0, 0.1) inset', offset: 0  },
    { 'box-shadow': '0 1px 20px #ffff00, 0 1px 10px #ffff00 inset', offset: 1  },
];

// 定义演示一浮动动画关键帧   offset -- 设置时间轴(0~1)
const Lantern_keyframes = [
    { opacity: 0, transform: 'translate(2px, -2px)',offset: 0  },
    { transform: 'translate(2px, -2px)', offset: 0.1  },
	{ opacity: 1, transform: 'translate(1px, -1px)',offset: 0.2  },
	{ transform: 'translate(2px, -2px)', offset: 0.3  },
	{ transform: 'translate(2px, -1px)', offset: 0.4  },
	{ transform: 'translate(2px, 2px)', offset: 0.5  },
	{ transform: 'translate(-1px, -1px)', offset: 0.6  },
	{ transform: 'translate(2px, -2px)', offset: 0.7  },
	{ transform: 'translate(1px, -1px)', offset: 0.8  },
	{ transform: 'translate(2px, -1px)', offset: 0.9  },
	{ transform: 'translate(2px, -2px)', offset: 1  },
];

// 定义演示二浮动动画关键帧   offset -- 设置时间轴(0~1)
const Lantern_keyframes_2 = [
    { opacity: 0, transform: 'scale(1) translate(0, 0%)',offset: 0  },
	{ opacity: 0.8, transform: 'scale(0.7) translate(20%, -20%)',offset: 0.2  },
	{ opacity: 1, transform: 'scale(0.4) translate(800%, -800%)',offset: 1  },
];


// 外部调用该函数并传参 idname-父元素id名 num-灯笼个数(默认为2，相关参数值需要具体修改，不做具体演示)
function addLanternStreamer(idname,num) {
	var num = num || 2;
	var idname = idname || '.container';
	// 通过元素id获取父元素
	let container = document.getElementById(idname);
	// 给父元素添加css样式 -- 用于框住子元素
	container.style.position = 'relative';
	// 给父元素添加子节点
	for (var i=0;i<num;i++) {
		// 创建子元素
		let particle = document.createElement("span");
		particle.className = "particle";
		// 设置css样式
		particle.style.display = 'block';  // 转换为块元素
		particle.style.position = 'absolute';
		particle.style.width = '25px';
		particle.style.height = '25px';
		particle.style.top = '-25px';
		particle.style.left = '-5px';
		particle.style.borderRadius = '100px';  // 相当于100%
		particle.style.background = 'radial-gradient(rgba(255, 255, 0, 0.5) 50%, transparent 70%)';
		particle.style.backgroundSize = 'cover';
		particle.style.backgroundRepeat = 'no-repeat';
		// 通过animate()函数设置动画
		particle.animate(Streamer_keyframes, Streamer_options);
		// 多个动画 -- 多次调用animate()函数可以将多个动画链接在一起
		// particle.animate(Lantern_keyframes,Lantern_options);
		particle.animate(Lantern_keyframes_2,Lantern_options_2);
		// 将子节点追加到父元素
		container.append(particle);
	}
	// 获取style样式表
	var style = document.getElementsByTagName("style")[0];
	// 设置::after伪元素样式
	var afterStyle = '.particle::after{position: absolute;content:"";background-image: url(./lantern.png);background-size: 100% 100%;border-radius: 100px;top: 0px;right: 0px;width: 25px;height: 25px;}';
	// 创建文本节点
	afterStyle = document.createTextNode(afterStyle);
	// 往样式表中追加样式
	style.appendChild(afterStyle);
	
}

animate 方法接收两个参数：keyframes 和 options ,其中 keyframes 对应CSS3中@keyframes中的声明块，options 对应 animation-* 属性及属性值。

大家可以先看这篇文章，有详细的参数讲解，内容嘎嘎香：

JS动画 - Web Animation API 实践

(。・∀・)ノ然后，我再补充一点  ⇲

当我们要同时调用多个动画的时候，可以这样写：

// 多个动画 -- 多次调用animate()函数可以将多个动画链接在一起
particle.animate(Streamer_keyframes, Streamer_options);
particle.animate(Lantern_keyframes,Lantern_options);

默认情况下animate会将动画注册到内部的queue队列里依次执行，如果希望多个animate调用同时执行，而不是依次执行，只需要在第二个参数中将queue设置为false。

也就是说，同时调用多个动画，我们需要在定义动画配置项的时候将queue设置为false

// 定义动画配置项
const options = {
	// 动画执行次数 Infinity-一直循环  CSS中使用infinite
	iterations: Infinity,
	// 动画开始时间点
	iterationStart: 0,
	// 动画开始之前的延迟
	delay: 0,
	// 动画结束之后的延迟
	endDelay: 0,
	// 动画运行方向 normal-正向播放 reverse-反向播放 alternate-正向和反向之间交替播放 alternate-reverse-反向和正向之间交替播放
	direction: 'alternate',
	// 动画时长  --  在 CSS 中更常使用 s 也就是秒，而在 JS 中更倾向使用 ms 毫秒，在 Web Animation API 中使用的也是毫秒单位
	duration: duration,
	// 动画填充模式 none-动画未执行时不应用任何样式 backwards- 动画结束恢复到原始状态（这是默认状态）  forwards- 动画结束保持最终状态
	fill: 'backwards',
	// 动画缓动类型  --  CSS3 默认的缓动类型是 ease ，.animate() 默认的缓动类型是 linear 线性的
	easing: 'ease-in-out',
	// 多个animate调用同时执行 -- 不进入队列，立刻执行
	queue: false,
};

怎么调用咱们的js文件(HTML)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#container {
				width: 150px;
				height: 50px;
				line-height: 50px;
				border-radius: 10px;
				font-size: 20px;
				font-weight: bold;
				position: relative;
				color: #fff;
				background: radial-gradient(circle, rgba(118, 174, 241, 1) 0%, rgba(247, 150, 192, 1) 100%);
				cursor: pointer;
				margin: 300px 200px;
				border: 1px solid aqua;
			}
            
            #container:hover {
				font-size: 20px;
				color: #f71;
				background: radial-gradient(circle, rgba(247, 150, 192, 1) 0%, rgba(118, 174, 241, 1) 100%);
			}
		</style>
	</head>
	<body>
		<button id="container">随乔木凉夏</button>
	</body>
	<script type="text/javascript" src="lantern.js"></script>
	<script>
		addLanternStreamer('container')
	</script>
</html>

引用完成后，直接在一个新的<script></script>中调用函数即可~

五.js向样式表中追加样式

// 获取style样式表
var style = document.getElementsByTagName("style")[0];
// 设置::after伪元素样式
var afterStyle =
	'.particle::after{position: absolute;content:"";background-image: url(./lantern.png);background-size: 100% 100%;border-radius: 100px;top: 0px;right: 0px;width: 25px;height: 25px;}';
// 创建文本节点
afterStyle = document.createTextNode(afterStyle);
// 往样式表中追加样式
style.appendChild(afterStyle);

HTML元素通常是由元素节点和文本节点组成。

document.createTextNode(afterStyle);

创建一个新的文本 (en-US)节点。这个方法可以用来转义 HTML 字符。

通俗点说，就是在标签内容后面追加文本内容~

具体的用法大家可以点下面链接看看官方文档：

Document.createTextNode()

随乔木凉夏
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
10-animation
冰霜的博客
08-31 369
动画 ​ 由于该技术的规范还没有稳定，在使用前要先确保浏览器对其兼容性。 Animations是css3的一个模块，使用keyframes定义如何随着时间的移动改变CSS的属性值，可以通过指定它们的持续时间，重复次数，如何重复来控制关键帧的行为。Animations由两部分组成：css动画的配置，以及一系列的keyframes（用来描述动画的开始、过程、结束状态）。不需要了解任何Js技术即可完成动画的制作 -过渡和动画之间的异同 1.1不同点 过渡必须人为的触发才会执行动画 动画不需要人为的触发就可以
JavaScript 高性能编程 —— Data Access 数据访问
cccloveforever的博客
04-20 1525
经典计算机科学的一个问题是确定数据应当存放在什么地方，以实现最佳的读写效率。数据存储在哪里， 关系到代码运行期间数据被检索到的速度。在 JavaScript 中，此问题相对简单，因为数据存储只有少量方 式可供选择。正如其他语言那样，数据存储位置关系到访问速度。每一种数据存储位置都具有特定的读写操作负担。大多数情况下，对一个直接量和一个局部变量数据访 问的性能差异是微不足道的。访问数组项和对象成员的代价要高一些，具体高多少，很大程度上依赖于浏 览器。
jQuery的animate函数实现图文切换动画效果
10-24
animate()在jquery中作为一个方法,可用于创建动画效果，jquery中的animate()方法让那个页面增加了很好的视觉效果
css3+javaScript实现一个左右钟摆-摇晃的红灯笼网页特效
yrldjsbk的博客
01-19 957
css3+javaScript实现一个左右钟摆-摇晃的红灯笼网页特效！前天逛博客时无意中看见了，别人的博客顶部有一个会左右钟摆的摇晃的红灯笼，产生了想法，我也想给自己做一个，但是网上找了很多方案，都没有实现。终于在昨天晚上搜索，找到了利用css3和js一起组合的技术，实现了这个效果。这个是css文件里面的内容。我故意把周期设计的步进很缓慢，看起来晃动的时候会比较柔和一点。这个index.html里面的代码。如图所示，这是一个静态的截图。实际上是可以看效果的。这个是js文件内容，控制2个灯笼图片的布局位置。
animation给同一个元素加多个动画
Wangdr的博客
03-06 272
animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。本文将详细介绍animate.css的使用。元素从右向左渐变滑入，然后再上下漂浮。animation动画可连写。
JavaScript---Node节点方法
guohui的博客
03-19 311
Node节点方法 appendChild() 向节点的子节点列表的结尾追加一个新的子节点 例子 <style> #box{width: 1000px;height:200px;background: #2b669a;} img{width: 40px;height: 40px;float: left;margin-right: 10px;} ...
SVG.js动画——animate方法和Runner实例
qq_41339126的博客
05-23 876
SVG.js动画——animate方法和Runner实例
animate.js
10-11
//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0; } //动画函数 obj---要执行动画的对象 json---要执行到的目标的参数对象 fn为执行完成后的回调函数(可以再次调用此方法按照上面格式传参--顺序执行多个动画) //调用例： //zIndex:1000 //透明度opacity: 数字类型----小数---放大100倍 // my$("btn1").onclick = function () { // var json1 = {"width": 400, "height": 500, "left": 500, "top": 80, "opacity": 0.2}; // animate(my$("dv"), json1, function () { //var json2={"width": 40, "height": 50, "left": 0, "top": 0, "opacity": 1, "zIndex": 1000} // animate(my$("dv"),json2,function(){按照此格式多次重复添加动画将会顺序执行} ); // }); // }; function animate(element, json, fn) { clearInterval(element.timeId);//清理定时器 //定时器,返回的是定时器的id element.timeId = setInterval(function () { var flag = true;//默认,假设,全部到达目标 //遍历json对象中的每个属性还有属性对应的目标值 for (var attr in json) { //判断这个属性attr中是不是opacity if (attr == "opacity") { //获取元素的当前的透明度,当前的透明度放大100倍 var current = getStyle(element, attr) * 100; //目标的透明度放大100倍 var target = json[attr] * 100; var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step;//移动后的值 element.style[attr] = current / 100; } else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex //层级改变就是直接改变这个属性的值 element.style[attr] = json[attr]; } else { //普通的属性 //获取元素这个属性的当前的值 var current = parseInt(getStyle(element, attr)); //当前的属性对应的目标值 var target = json[attr]; //移动的步数 var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step;//移动后的值 element.style[attr] = current + "px"; } //是否到达目标 if (current != target) { flag = false; } } if (flag) { //清理定时器 clearInterval(element.timeId); //所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数 if (fn) { fn(); } } //测试代码 console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step); }, 20); }
js的animate函数
热门推荐
susuzhe
03-15 2万+
/* 动画函数： dom:要运动的节点对象 o:{属性：目标值，属性：目标值....} (透明度使用属性：opacity:100) 透明度的值是0-100； 里面的opacity 和 filter会自动做转换。 time:切换的频率，表示运动的快慢 fn：回调函数，在运动执行完毕后执行。 */ funct
原生js的animate()方法详解
WanweI897的博客
09-22 2702
Element 接口的 animate() 方法是创建一个新的 Animation 的便捷方法，将它应用于元素，然后运行动画。它将返回一个新建的 Animation 对象实例。同时通过Element.getAnimations() 方法可获取元素所有的Animation实例。
javaScript--animate函数
Zmikoo学习之路
05-06 5654
一、思路 1、获取目标值 2、再获取初始值 3、得到总距离 4、定义定时器的执行间隔 5、获取时间 6、得到总次数 7、总距离/总次数 = 步长 8、使用setInterval不停地改变dom元素的每一个css值 让元素不停地改变样式 造成动画的错觉。 9、定义一个计数器 每改变一次样式就累加一次 直到计数器大于等于总次数 此时说明执行完毕 10、强行拉到终点 11、停表 12、执行回调函数 二、...
animate短动画 多媒体应用基础.期末作业.rar
07-15
SCAU公选课期末作业 多媒体应用基础所要求的 animate动画 绩点还不错 4.6 因为多个文件，所以就压缩了，上传的是rar文件。 下载后用win.rar解压了就好。 包括： 平时作业 期末作业，也就是animate动画源程序 《多媒体应用基础》(公选)考查作业 9.9买不了吃亏！9.9买不了上当！
动画函数 --animate(obj, target, callback)
08-11
动画函数--（移动的元素，移动的位置，回调函数)
animate-vanilla-js:香草JavaScript中实现的基于诺言的微小动画功能
05-12
动画香草JS 在香草JavaScript中实现的基于诺言的微小动画功能。 :ghost: 3kb（压缩后的1kb） :package: 没有依赖关系 :new_moon_face: TypeScript支持 :man_dancing: 多种内置放松 :handshake: 基于承诺 :gear: 使用requestAnimationFrame :male_sign:‍:male_sign: 可取消 安装 模块捆绑器（例如Webpack） yarn add animate-vanilla-js import animate from 'animate-vanilla-js' 脚本标签 从此处下载最新版本的animate-vanilla-js-browser.js ： ： < script type =" text/javascript " src =" animate-vanilla-js-browser.js " > </ script > 然后可以通过全局函数animateVanillaJs()使用动画功能 用
react-native-use-animate:React native中的动画变得简单
05-12
由于该演示是一个世博项目，因此我们还将该应用发布在世博会上。 您所要做的就是下载并扫描以下QR码： 这仅适用于Android，因为Apple限制了如何发布应用程序。 安装 yarn add @rootstrap/react-native-use-animate...
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 417
步骤很详细，直接上教程……
一个小时学习javaScript
weixin_43064364的博客
04-20 957
JavaScript 是一种广泛使用的编程语言，最初被设计来增加网页的交互性，让用户能够与网页上的元素进行互动。自从1995年被引入以来，JavaScript已经发展成为Web开发中不可或缺的一部分，并且其用途已经大大扩展到了网页之外。
vue2---修饰符
weixin_45503872的博客
04-24 1009
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
SVG 中通过使用标签<animate>实现文本动画有哪几种方法
06-12
在SVG中，可以通过使用<animate>标签来实现文本动画。实现文本动画的方法有以下几种： 1. 使用<animate>标签的“attributeName”属性来控制文本的属性值，如x、y、font-size、opacity等。 2. 使用<animate>标签的“attributeType”属性来控制文本属性值的类型，如CSS或XML。 3. 使用<animate>标签的“values”属性来定义文本属性值在动画过程中的变化值，可以设置多个值，表示从一个值变化到另一个值。 4. 使用<animate>标签的“dur”属性来设置动画的持续时间。 5. 使用<animate>标签的“begin”属性来设置动画开始的时间，可以设置为一段时间或事件。 6. 使用<animate>标签的“repeatCount”属性来设置动画的重复次数。 7. 使用<animate>标签的“fill”属性来设置动画结束后文本属性值的状态，可以设置为“freeze”或“remove”。 以上是几种在SVG中实现文本动画的方法，可以根据需要选择合适的方法进行实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

随乔木凉夏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值