ホームページ > 記事 > ウェブフロントエンド > 単一の DOM 要素にアニメーションを追加する方法の詳細な例
この記事では、javascript に関する関連知識を提供し、アニメーション効果を追加するための dom 要素の操作に関する関連事項を主に紹介します。一緒に見ていきましょう。皆様のお役に立てれば幸いです。
[関連する推奨事項: JavaScript ビデオ チュートリアル、Web フロントエンド]
<div id="box"></div>
var box = document.getElementById("box"); var t = null; t = setInterval(function(){ })
t = setInterval(function(){終了条件} )
// 元素的属性值 === 目标点 if(dom.attr === target){ clearInterval(t); }
起点
動きの起点実際には現在の要素の位置です。API を通じて現在の要素の位置を取得し、この位置を動きの開始点として使用します。
カプセル化の主な機能は、要素が短い時間間隔内で属性を継続的に変更してアニメーション効果を実現できるようにすることです
単一属性モーション フレームワーク:
<button id="btn">开始运动</button> <div id="box"></div> <div id="line"></div> <script> var box = document.getElementById("box"); var btn = document.getElementById("btn"); var target = 500; // 速度可以根据 起始点和目标点进行判断,从而决定正负; var speed = 17; // - 方向; btn.onclick = function(){ // 1. 获取元素初始位置; var _left = box.offsetLeft; speed = target - _left >= 0 ? speed : -speed ; var interval = setInterval( function(){ // 4. 判定运动的终止条件; if(Math.abs(target - _left) <= Math.abs(speed) ){ // 因为终止时有可能没有到达目标点,因此我们把元素赋值到目标点位置; box.style.left = target + "px"; clearInterval( interval ); }else{ // 2. 元素根据初始位置进行改变; _left += speed; // 3. DOM操作,根据已有数据让元素属性发生改变; box.style.left = _left + "px"; } } , 30) } </script>
<script>// - 提取属性名作为参数; btn.onclick = function(){ animate( "left", 500 )}function animate( attr , target , speed = 10 ){ // 1. 获取元素初始样式 var _style = getComputedStyle( box ); // 2. 根据属性要求取出当前的属性的属性值; var _css_style = parseInt(_style[attr]); speed = target - _css_style >= 0 ? speed : -speed ; var interval = setInterval( function(){ // 4. 判定运动的终止条件; if(Math.abs(target - _css_style) <= Math.abs(speed) ){ // 因为终止时有可能没有到达目标点,因此我们把元素赋值到目标点位置; box.style[attr] = target + "px"; clearInterval( interval ); }else{ // 2. 元素根据初始位置进行改变; _css_style += speed; // 3. DOM操作,根据已有数据让元素属性发生改变; box.style[attr] = _css_style + "px"; } } , 30)}</script>
<script>function animate( dom , attr , target , speed = 10 ){ // 1. 获取元素初始样式 var _style = getComputedStyle( dom ); // 2. 根据属性要求取出当前的属性的属性值; if( attr === "opacity"){ var _css_style = parseInt(_style[attr] * 100 ); target *= 100; }else{ var _css_style = parseInt(_style[attr]); } speed = target - _css_style >= 0 ? speed : -speed ; var interval = setInterval( function(){ // 4. 判定运动的终止条件; if(Math.abs(target - _css_style) <= Math.abs(speed) ){ // 因为终止时有可能没有到达目标点,因此我们把元素赋值到目标点位置; if( attr === "opacity"){ dom.style[attr] = target / 100; }else{ dom.style[attr] = target + "px"; } clearInterval( interval ); }else{ // 2. 元素根据初始位置进行改变; _css_style += speed; // 3. DOM操作,根据已有数据让元素属性发生改变; if( attr === "opacity"){ dom.style[attr] = _css_style / 100 ; }else{ dom.style[attr] = _css_style + "px"; } } } , 30)}</script>
<button id="btn">开始运动</button> <div id="box"></div> <script> var box = document.getElementById("box"); var btn = document.getElementById("btn"); btn.onclick = function(){ animate( box , "left" , 500 ) } function animate( dom , attr , target , transition = "buffer", speed = 10 ){ var _style = getComputedStyle( dom ); if( attr === "opacity"){ var _css_style = parseInt(_style[attr] * 100 ); target *= 100; }else{ var _css_style = parseInt(_style[attr]); } if( transition === "liner"){ speed = target - _css_style >= 0 ? speed : -speed ; } var interval = setInterval( function(){ if( transition === "buffer"){ // 计算速度; speed = (target - _css_style) / 10; //速度不取整在小数部分会做很多无意义的计算; speed = speed > 0 ? Math.ceil(speed) :Math.floor( speed ) } if(Math.abs(target - _css_style) <= Math.abs(speed) ){ // 因为终止时有可能没有到达目标点,因此我们把元素赋值到目标点位置; if( attr === "opacity"){ dom.style[attr] = target / 100; }else{ dom.style[attr] = target + "px"; } clearInterval( interval ); }else{ // 2. 元素根据初始位置进行改变; _css_style += speed; // 3. DOM操作,根据已有数据让元素属性发生改变; if( attr === "opacity"){ dom.style[attr] = _css_style / 100 ; }else{ dom.style[attr] = _css_style + "px"; } } } , 30) } </script> //只需要改变里面transition的值就可以调整运动模式 //buffer为缓冲运动 //liner为匀速运动マルチ属性モーション フレームワーク (拡張機能)
<script>// 在一个定时器之中,用for循环同时执行多次dom样式操作; // 1. 需要优化的部分:参数,要把样式部分的参数优化成一个对象; function animate( dom , attrs , transition = "buffer", speed = 10 ){ var _style = getComputedStyle( dom ); // 获取元素当前的属性 : for(var attr in attrs ){ // attr ? 要过渡的css属性名; // attrs[attr] ? 要过渡的当前属性; attrs[attr] = { target : attrs[attr], // 元素当前的属性放入到这个对象之中; now : parseInt(_style[attr]) } } // 因为直接关闭interval是没有作用的,此时的inteval是一个局部变量,每次animate被调用的时候都会直接重置; // 我们应该吧定时器的id放在当前正在执行过渡效果的dom对象上; clearInterval(dom.interval); dom.interval = setInterval( function(){ for(var attr in attrs){ // 取出 attrs 之中的目标点和当前值; speed = (attrs[attr].target - attrs[attr].now) / 10 ; // 根据速度正负,进行速度取整; speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed ); // 判定终止条件; if( attrs[attr].target === attrs[attr].now){ // 删除已经到达目标点的属性; delete attrs[attr] // 判定attrs里面已经没有属性了; for(var a in attrs){ return false; } clearInterval(dom.interval); }else{ attrs[attr].now += speed; dom.style[ attr ] = attrs[attr].now + "px"; } } } , 30)}// 优化参数之后,key值是等待运动的css属性,value值是元素的目标; btn.onclick = function(){ animate( box , { width : 500 , height : 400 } )}</script>カルーセル チャート関数の実装
<style> *{ margin: 0; padding: 0; } .container{ width: 1130px; height: 286px; margin: 0 auto; position: relative; overflow: hidden; } .wrapper{ width: 6780px; position: absolute; left: 0; } .slide{ float: left; } .slide , .slide img{ width: 1130px; height: 286px; } .button-prev{ left: 0; background-position: 30px center; background-image: url(https://static.zcool.cn/git_z/z/widget/slider/images/svg/left_arrow.svg?v=2); top: 0; width: 13px; height: 100%; padding: 0 80px; border-radius: 2px; position: absolute; background-repeat: no-repeat; } .button-prev:hover{ background-image: url(https://static.zcool.cn/git_z/z/widget/slider/images/svg/left_arrowhover.svg?v=2); } .button-next{ right: 0; background-position: 91px center; background-image: url(https://static.zcool.cn/git_z/z/widget/slider/images/svg/right_arrow.svg?v=2); top: 0; width: 13px; height: 100%; padding: 0 80px; border-radius: 2px; position: absolute; background-repeat: no-repeat; } .button-next:hover{ background-image: url(https://static.zcool.cn/git_z/z/widget/slider/images/svg/right_arrowhover.svg?v=2); } .pagination{ position: absolute; bottom: 10%; width: 100%; height: 10px; left: 30px; } .pagination span{ display: inline-block; width: 10px; height: 10px; margin-left: 10px; border-radius: 50%; background-color: cornflowerblue; border: 2px solid transparent; background-clip: content-box; } .pagination span.active{ border: 2px solid skyblue; box-shadow: 0 0 5px skyblue; background-color: #fff; } </style>
<!-- 类名请使用和我一样的类名 --> <div class="container"> <div class="wrapper"> <!-- 第0张图片 --> <div class="slide"> <img src="https://img.zcool.cn/ad_manager/location/f35d611484931101c43350bbdbd5.jpg" alt=""> </div> <div class="slide"> <img src="https://img.zcool.cn/ad_manager/location/3dcb6113a3471101c433505bbd72.jpg" alt=""> </div> <div class="slide"> <img src="https://img.zcool.cn/ad_manager/location/65f36113a3341101c4335014b174.jpg" alt=""> </div> <div class="slide"> <img src="https://img.zcool.cn/ad_manager/location/7f97611481181101c43350225b33.jpg" alt=""> </div> <div class="slide"> <img src="https://img.zcool.cn/ad_manager/location/afcf6114801e1101c433507f9e28.jpg" alt=""> </div> <!-- 最后一张图片 --> <!-- 把第0张图片放在整个图片结构的最后 --> <div class="slide"> <img src="https://img.zcool.cn/ad_manager/location/f35d611484931101c43350bbdbd5.jpg" alt=""> </div> </div> <div class="button-next"></div> <div class="button-prev"></div> <div class="pagination"> <span class="active"></span> <span></span> <span></span> <span></span> <span></span> </div> </div> <script src="./utils.js"></script> <script> // 轮播图的核心就是左右切换按钮,实现显示元素下标的改变; var index = 0 ; var prev = 0; var next_btn = document.querySelector(".button-next"); var prev_btn = document.querySelector(".button-prev"); var slides = document.querySelectorAll(".slide"); var wrapper = document.querySelector(".wrapper"); // 自动播放的阻止功能是在鼠标移入container容器之中就触发的; var container = document.querySelector(".container"); var bullets = document.querySelectorAll(".pagination span"); // 绑定事件 // - 轮播图改变下标功能必须设置边界; function bindEvent(){ next_btn.onclick = function(){ add(); bannerAnimate(); } prev_btn.onclick = function(){ reduce() bannerAnimate(); } container.onmouseover = function(){ stop(); } container.onmouseout = function(){ autoPlay(); } bullets.forEach( function( ele , i ){ ele.onmouseover = function(){ prev = index; // 防止穿帮逻辑; // - 如果在假的第0张图片上(在最后一张图片上) // - 我们先让真假图片呼喊然后在进行元素的动画效果; if( index === 5 ){ wrapper.style.left = 0; } index = i; bannerAnimate(); } }) } // 下标增加; function add(){ prev = index; if( index === slides.length - 1 ){ // 这个逻辑会在最后一张图片进行切换时进入; // 我们让wrapper直接位移到开头,改变元素位置的同时让用户无法感知; wrapper.style.left = 0; // 我们需要从第0个图片切换到第一个图片; // -因为我们最后一张图片的显示和开头图片的显示是一样的 index = 1; }else{ index ++; } } // 下标减少; function reduce(){ prev = index; if( index === 0 ){ wrapper.style.left = -(slides.length - 1) * 1130 + "px"; index = slides.length - 2; }else{ index --; } } // 根据我们的算法去实现动画效果; function bannerAnimate(){ animate( wrapper , { left : - index * 1130 }); // 给对应的分页器按钮添加active; // 先去清空所有的类名; bullets.forEach( function( ele ){ ele.classList.remove("active") }) // 下标需要进行特殊处理,在显示最后一张图片的时候,给第0个按钮添加active; bullets[ index === 5 ? 0 : index ].classList.add("active"); } bindEvent(); var interval = null; function autoPlay(){ // 间隔3s,让js点击一下下一页按钮; interval = setInterval( function(){ // 虚拟点击 : next_btn.dispatchEvent( new Event("click")); } , 3000 ) } function stop(){ clearInterval( interval ) } autoPlay(); </script>
例は次のとおりです
プロジェクトの背景: uniapp h5 アプリケーション、ユーザーにダウンロードを促すために、ダウンロードを促す dom があります。当初はそれを各タブバー (合計 4 つ) に追加したかったのですが、別のタブバーを試したいと考えています。再生方法は次のとおりです。 効果は次のとおりです :
コードを直接入力します:function showDownloadTisp() { console.log('--------------------------->showDownloadTisp') // #ifdef H5 const parent = document.querySelector('.uni-tabbar') console.log('parent:', parent) const tips = document.createElement('p') tips.id = 'downloadTisp' tips.setAttribute('style', 'background: rgba(51,51,51,0.75);' ) tips.setAttribute('style', `background: rgba(51,51,51,0.75); position: fixed;width: 100%;height: ${uni.upx2px(120)}px; bottom:${uni.upx2px(-140)}px; display: flex;flex-direction: row;justify-content: space-between;align-items:center;transition:0.5s;` ) const desParent = document.createElement('p') const des = document.createTextNode('Download our App, you will get a better experience.') desParent.appendChild(des) desParent.setAttribute('style', `padding: 0;color: #FFFFFF;font-size:${uni.upx2px(24)}px;margin-left: ${uni.upx2px(27)}px;padding-right: ${uni.upx2px(25)}px;` ) const iosImage = document.createElement('img') iosImage.src = '../static/guide/download ios.png' iosImage.setAttribute('style', `width: ${uni.upx2px(154)}px;height: ${uni.upx2px(54)}px;margin-right: ${uni.upx2px(25)}px;`) const anroidImage = document.createElement('img') anroidImage.src = '../static/guide/download android.png' anroidImage.setAttribute('style', `width: ${uni.upx2px(154)}px;height: ${uni.upx2px(54)}px;margin-right: ${uni.upx2px(50)}px;`) const closedImage = document.createElement('img') closedImage.src = '../static/guide/download closd.png' closedImage.setAttribute('style', `width: ${uni.upx2px(30)}px;height: ${uni.upx2px(30)}px;position: absolute;right:${uni.upx2px(15)}px;top: ${uni.upx2px(15)}px;padding: ${uni.upx2px(5)};` ) tips.appendChild(desParent) tips.appendChild(iosImage) tips.appendChild(anroidImage) tips.appendChild(closedImage) iosImage.onclick = () => { //console.log("iosImage.onclick") window.location.href = 'https://apps.apple.com/cn/app/gbm001/id1574324240' // window.open('https://www.baidu.com/') } anroidImage.onclick = () => { //console.log("anroidImage.onclick") window.location.href = 'https://play.google.com/store/apps/details?id=com.vandream.gbmpro' // window.open('https://www.sina.com.cn/') } closedImage.onclick = () => { console.log("closedImage.onclick") tips.remove() } parent.parentNode.appendChild(tips) //parent.appendChild(tips) setTimeout(() => { tips.style.transform = `translateY(${uni.upx2px(-140) - 50}px);` //console.log(" tips.style.transform done") }, 2500) // #endif }
コードでノードを作成し、コードはスタイルです; そしてアニメーション; アプリケーションの起動時に呼び出すだけです;
js の変換アニメーションの設定について; ここでは 3D 形式に変更します
function showDownloadTisp() { // #ifdef H5 const parent = document.querySelector('.uni-tabbar') // console.log('parent:', parent) const tips = document.createElement('p') tips.id = 'downloadTisp' // tips.setAttribute('style', // 'background: rgba(51,51,51,0.75);' // ) // tips.setAttribute('style', // `background: rgba(51,51,51,0.75); position: fixed;width: 100%;height: ${uni.upx2px(120)}px; bottom:${uni.upx2px(-140)}px; display: flex;flex-direction: row;justify-content: space-between;align-items:center;transition:0.5s;` // ) tips.setAttribute('style', `background: rgba(51,51,51,0.75); position: fixed;width: 100%;height: ${uni.upx2px(120)}px; bottom:50px; display: flex;flex-direction: row;justify-content: space-between;align-items:center;transition:0.5s; transform-origin:center bottom; transform:perspective(900px) rotateX(90deg);` ) const desParent = document.createElement('p') const des = document.createTextNode('Download our App, you will get a better experience.') desParent.appendChild(des) desParent.setAttribute('style', `padding: 0;color: #FFFFFF;font-size:${uni.upx2px(24)}px;margin-left: ${uni.upx2px(27)}px;padding-right: ${uni.upx2px(10)}px;` ) const iosImage = document.createElement('img') // iosImage.src = '../static/guide/download ios.png' iosImage.src = 'https://img.vandream.com/54/0330f6211506cc.png' iosImage.setAttribute('style', `width: ${uni.upx2px(154)}px;height: ${uni.upx2px(54)}px;margin-right: ${uni.upx2px(25)}px;`) const anroidImage = document.createElement('img') // anroidImage.src = '../static/guide/download android.png' anroidImage.src = 'https://img.vandream.com/53/0330f45097465d.png' anroidImage.setAttribute('style', `width: ${uni.upx2px(154)}px;height: ${uni.upx2px(54)}px;margin-right: ${uni.upx2px(50)}px;`) const closedImage = document.createElement('img') // closedImage.src = '../static/guide/download closd.png' closedImage.src = 'https://img.vandream.com/52/0330f523d7709d.png' closedImage.setAttribute('style', `width: ${uni.upx2px(30)}px;height: ${uni.upx2px(30)}px;position: absolute;right:${uni.upx2px(15)}px;top: ${uni.upx2px(15)}px;padding: ${uni.upx2px(5)};` ) tips.appendChild(desParent) tips.appendChild(iosImage) tips.appendChild(anroidImage) tips.appendChild(closedImage) iosImage.onclick = () => { console.log('iosImage.onclick') window.location.href = 'https://apps.apple.com/cn/app/gbm001/id1574324240' // window.open('https://www.baidu.com/') } anroidImage.onclick = () => { console.log('anroidImage.onclick') window.location.href = 'https://play.google.com/store/apps/details?id=com.vandream.gbmpro' // window.open('https://www.sina.com.cn/') } closedImage.onclick = () => { console.log('closedImage.onclick') tips.remove() } parent.parentNode.appendChild(tips) // parent.appendChild(tips) setTimeout(() => { // tips.style.transform = `translateY(${uni.upx2px(-140) - 50}px);` tips.style.transform = 'rotateX(0deg)' // console.log(" tips.style.transform done"):rotateX(90deg); }, 2500) // #endif }【関連する推奨事項:
JavaScript ビデオ チュートリアル 、Web フロントエンド ]
以上が単一の DOM 要素にアニメーションを追加する方法の詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。