js动画（2）——透明度动画

最新推荐文章于 2021-08-18 19:10:06 发布
最新推荐文章于 2021-08-18 19:10:06 发布
阅读量603 收藏
点赞数
分类专栏： js实例操作 文章标签： 前端 js动画 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tmqueen/article/details/50688685
版权 
<html>
	<head>
		<title>透明度变化效果</title>
		<style>
		body{
			margin: 0px;
			padding: 0px;
		}
		.redb{
			width:200px;
			height: 200px;
			background: red;
			filter:alpha(opacity=30);
			opacity: 0.3;
		}
		</style>
		<script src="file:///F:/front end/jqueryjquery-1.11.3.min.js" type="text/javascript"></script>
	</head>
	<body>
		<div class="redb" id="opbtn"></div>
		<script>
		window.onload = function(){
			var opDiv = document.getElementById("opbtn");
			opDiv.onmouseover = function(){
      			startMove(100);
			}
			opDiv.onmouseout = function(){
				startMove(30);
			}
		}
		var timer = null;
		var alpha = 30;
		var speed = 0;
		function startMove(opTarget){
			clearInterval(timer);
			var opDiv = document.getElementById("opbtn");
			timer = setInterval(function(){
				if(alpha<opTarget){
					speed = 10;
				}
				else if(alpha>opTarget){
					speed = -10;
				}
				if(alpha==opTarget){
					clearInterval(timer);
				}
				else{
					alpha += speed;
					opDiv.style.opacity = alpha/100;
					opDiv.style.filter = 'alpha(opacity='+alpha+')';
				}
			},30);

		}
		</script>
	</body>
</html>

小结:
1、filter和opacity区别：w3c标准透明度就是opacity,filter只有IE才能用,其他浏览器都支持opacity
2、改变透明度时候，不能通过类似offsetLeft的方法获取透明度值，因此需要单独创建变量
3、不要忘记将定时器赋值给timer
爱吃番茄的西红柿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS基础-特效篇-透明度动画
weixin_45799003的博客
05-12 342
1.设置opacity。1-0。高版本用：filter。alpha()。 2.特殊属性特殊处理： 1）页面元素和样式 <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } body {
微信小程序 动画 放大 改变透明度
11-25
本文将深入探讨如何实现动画效果，特别是关于元素的放大和改变透明度的操作。 首先，微信小程序提供了`wx.createSelectorQuery()`接口来获取页面上的节点信息，这在动画实现中至关重要。通过这个接口，我们可以选取...
《js动画效果》之透明度动画
mmrsdym的专栏
10-11 1788
学习资源来自慕课网《js动画效果》：http://www.imooc.com/learn/167
JS透明度变化动画
DiDaDi的博客
08-16 494
透明度变化动画
js动画--透明度变化
aizhubian7623的博客
01-08 129
对于设置元素的透明度的变化。主要思想也是通过一个定时器来控制的。 此外对于透明度有一点要说明一下，就是在IE中我们在css中设置透明度的方式filter:alpha(opacity:value)其中value值从0~100; 在火狐中透明度可以通过opacity：value来设置，其中value=0~1. 代码如下： html <!DOCTYPE html> ...
前端--js实现透明度动画效果
need_just_word的博客
12-27 1412
这个效果的实现和我的上一篇博客一样，主要还是应用setInterval(fun(),milltime);
Canvas实际案例操作——爆炸粒子，渐入动画效果
02-18
3. **定时器或requestAnimationFrame**：设置定时器或使用`requestAnimationFrame()`来间隔执行动画步骤，逐渐调整透明度直至完全可见。 4. **缓存与重绘**：为了提高性能，可以将不改变的部分预先绘制到离屏Canvas...
CSS3火警提示图标动画特效
07-24
在这个火警提示图标动画特效中，开发者可能定义了从静止的火警图标到火焰燃烧、声波震动等不同状态的关键帧，通过改变元素的背景颜色、透明度、大小等属性，创造出逼真的火警动态效果。 接着，我们来看“图标动画”...
Flash 水波涟漪荡漾动画效果.rar
07-10
2. **形状补间和动作补间**：形状补间用于创建对象形状的变化，而动作补间则用于对象位置、透明度等属性的平滑变化。水波纹的效果可能结合了这两种补间类型。 3. **事件监听**：为了响应用户的交互，如点击或水滴落...
创意点赞按钮SVG动画特效
07-24
SVG的优点还包括文件小、支持透明度、易于操作和动画化。 在“创意点赞按钮SVG动画特效”中，SVG被用来创建点赞图标的形状。SVG的结构允许开发者通过编程方式控制每个图形的细节，例如线条的宽度、颜色和填充，甚至...
JS实现的透明度渐变动画效果示例
12-12
本文实例讲述了JS实现的透明度渐变动画效果。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS透明度变化效果</title> <style> body{ margin: 0px; padding: 0px; } .redb{ width:200px; height: 200px; background: red; filter:alpha(o
jQuery实现鼠标响应式透明度渐变动画效果示例
11-26
本文实例讲述了jQuery实现鼠标响应式透明度渐变动画效果。分享给大家供大家参考，具体如下： 先来看看运行效果： 具体代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>js动画-透明度变化</title> [removed][removed] <style> * { margin: 0; padding: 0; font-family:"微软雅黑" } #box{ height:100px;
Js动画-改变透明度（二）
依稀梦兮的博客
04-02 496
JS改变透明度 //Description:鼠标移入颜色变深，移出变淡 var timer=null; var alpha=30; function startMove(target) { var Div=document.getElementById("div1"); clearInterval(timer); timer=setInterval ( ...
原生JS透明度动画案例
温壁
11-09 246
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>透明度动画</title> </head> <style> *{margin: 0;pa.
用JQuery实现给div设置透明度的动画操作
王者生辉的博客
08-18 340
<!DOCTYPE html> <html> <head> <title>新建网页</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="key.
JQ动画，背景透明度
weixin_30920513的博客
05-21 120
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>...
Jquery 鼠标滑过时改变元素透明度的动画效果
weixin_30294295的博客
05-08 292
想要的效果是：当鼠标放在界面上排列着的某个方块形状元素上时，改变该元素的背景透明度； 　　　　　　　当鼠标滑过时，被滑过的元素就会形成透明度依次渐变的效果。 首先来设计一下需要用到的元素： 需实现效果的HTML 1 <div id="divEquBooks"> 2 <a &g...
透明度动画
weixin_34291004的博客
04-28 77
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta...
js动画效果之透明度变化
伊人笑桃花酒的博客
04-11 734
此案例总结的是鼠标移入框内透明度渐变的效果，使用原生js、jquery与css3 3种方法分别实现。照常下面是效果图： 下面是js的实现代码：window.onload=function(){ var odiv=document.getElementById("mydiv"); odiv.onmouse
three.js sprite opacity透明度动画，怎么写
最新发布
08-30
### 回答1： 在 three.js 中实现 sprite 的透明度动画可以使用 Tween.js 库或者手动更新透明度的值。 使用 Tween.js 的方法如下： 1. 在 HTML 中引入 Tween.js 库。 ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/2022.3.7/Tween.min.js"></script> ``` 2. 在 three.js 代码中创建 Tween 对象，并设置动画的目标和时间。 ```javascript var sprite = createSprite(); // 创建 sprite var tween = new TWEEN.Tween({ opacity: sprite.material.opacity }) .to({ opacity: 0 }, 1000) .onUpdate(function() { sprite.material.opacity = this.opacity; }) .start(); ``` 手动更新透明度的值的方法如下： 1. 在 three.js 代码中使用 `requestAnimationFrame()` 函数来更新 sprite 的透明度。 ```javascript var sprite = createSprite(); // 创建 sprite var startTime = Date.now(); var duration = 1000; // 动画持续时间，单位为毫秒 function update() { var elapsed = Date.now() - startTime; var progress = elapsed / duration; sprite.material.opacity = Math.max(1 - progress, 0); requestAnimationFrame(update); } update(); ``` 2. 使用 `setInterval()` 函数来更新 sprite 的透明度。 ```javascript var sprite = createSprite(); // 创建 sprite var startTime = Date.now(); var duration = 1000; // 动画持续时间，单位为毫秒 setInterval(function() { var elapsed = Date.now() - startTime; var progress = elapsed / duration; sprite.material.opacity = Math.max(1 - progress, 0); }, 1000 / 60); // 每秒 60 帧 ``` ### 回答2： three.js是一个用于创建3D图形的JavaScript库，它包含了一组功能丰富的API，可用于创建和操作各种3D实体。在three.js中，要实现透明度动画，需要使用Sprite对象和Tween.js库。 Sprite对象是three.js中用于呈现2D图像或文本的一种简单图形对象。透明度动画是通过控制Sprite对象的透明度属性来实现的。这里我们将使用Tween.js库来创建透明度动画。 首先，需要创建一个Sprite对象，设置其位置、大小、纹理等属性。然后，在每一帧循环中，通过Tween.js库来更新Sprite对象的透明度属性。具体实现如下： ```javascript // 创建场景 var scene = new THREE.Scene(); // 创建相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建Sprite对象 var spriteMap = new THREE.TextureLoader().load('sprite.png'); var spriteMaterial = new THREE.SpriteMaterial({ map: spriteMap }); var sprite = new THREE.Sprite(spriteMaterial); sprite.position.set(0, 0, 0); // 设置Sprite对象的位置 sprite.scale.set(1, 1, 1); // 设置Sprite对象的大小 scene.add(sprite); // 创建Tween.js动画 var opacityTween = new TWEEN.Tween(sprite.material) .to({ opacity: 0 }, 2000) // 设置目标透明度和动画持续时间 .repeat(Infinity) // 循环执行动画 .yoyo(true) // 在两个方向上播放动画 .start(); // 动画更新函数 function animate() { requestAnimationFrame(animate); TWEEN.update(); // 更新Tween.js动画 renderer.render(scene, camera); } animate(); ``` 在上述的代码中，我们首先创建了一个Sprite对象，并给它设置了位置和大小。然后，创建了一个Tween.js动画，设置了目标透明度和动画持续时间，并指定了动画的循环和播放方向。最后，在动画更新函数中，通过调用TWEEN.update()来更新Tween.js动画。 这样，就实现了一个透明度动画效果。你可以根据需要调整透明度的目标值、动画持续时间、循环次数等参数来实现不同的效果。 ### 回答3： 在three.js中创建透明度动画的精灵对象非常简单。首先，确保已经创建了一个场景（Scene），并将相机（Camera）添加到该场景中。然后，创建一个精灵（Sprite）对象，并将其添加到场景中。 使用three.js的Tween类可以轻松实现透明度动画。你需要引入Tween.js的库文件，并在代码中创建一个Tween实例。通过调用Tween实例的to()方法，可以定义透明度动画的起始值、结束值和动画持续时间。 下面是一个简单的示例代码，用于创建透明度动画的精灵对象： ``` const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建精灵对象 const spriteMap = new THREE.TextureLoader().load('sprite.png'); const spriteMaterial = new THREE.SpriteMaterial({ map: spriteMap }); const sprite = new THREE.Sprite(spriteMaterial); sprite.position.set(0, 0, 0); scene.add(sprite); // 定义透明度动画 const tween = new TWEEN.Tween(sprite.material) .to({ opacity: 0 }, 2000) // 终止opacity为0，动画持续时间为2秒 .onComplete(() => { // 动画完成后的回调函数 console.log('Animation complete'); }); // 启动动画 tween.start(); // 动画循环 function animate() { requestAnimationFrame(animate); TWEEN.update(); // 更新Tween对象 renderer.render(scene, camera); } animate(); ``` 在上述示例中，精灵对象透明度从初始值渐变为0，动画持续时间为2秒。可以按需调整透明度起始值、结束值和动画持续时间以满足你的需求。 记得在HTML文件头部引入Tween.js的库文件： ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.umd.js"></script> ``` 通过以上代码，你可以在three.js中创建透明度动画的精灵对象。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值