创建渐变的CSS和JavaScript动画 [英] Create animation with css gradient and javascript

问题描述

我工作的一个应用程序科尔多瓦，让我们来扫描RFID标签。基于RSSI信号强度的我需要显示一个栏，显示了RFID标签如何关闭或多远。越接近我得到的标签，在酒吧我去越高，进一步，较小的酒吧而成。我建立以下 plunkr ，我认为我可以使用。不幸的是，动画不是很顺利，其对移动应用缓慢。我认为这个问题是我显示/隐藏的div超时模拟动画。我想我可能需要改变这种使用CSS动画与渐变。但我不如何做到这一点很熟悉，我不知道我怎么会隐藏渐变的一部分，如果说我想显示栏的只是一小部分。如何做到这一点的任何建议都大大AP preciated。

更新：我已上载我想实现什么样的视频。不幸的是，我不能这样上传到SO。当我读到标签的动画会改变。所以，我可以移动标签来回基于关闭，它应改变吧。

https://www.dropbox.com/ S / 9bd421fhqvt9v5g / gradient-bar-demo.mov？DL = 0

解决方案

有关更好的性能，最好是动画的规模，而不是高度。 来源（动漫的表现真的很不错的文章）。

下面是你如何能做到这一点的例子。它并不完美，但希望它应该给你一个很好的起点。

\r

\r

VAR输入= document.querySelector（'输入'）;\r
\r
input.addEventListener（'输入'，函数（）{\r
    VAR值= THIS.VALUE / ​​100;\r
    VAR栏= document.querySelector（米吧​​。'）;\r
    \r
    bar.style.transform ='的scaleY（'+价值+'）';\r
    //调整背景大小要占规模的变化，有可能是一个更好的解决方案\r
    bar.style.backgroundSize ='200像素'+（​​300 /值）+'像素';\r
}）;

\r

输入{\r
    宽度：200像素;\r
}\r
\r
.meter {\r
    宽度：200像素;\r
    高度：300像素;\r
    的margin-top：20px的;\r
    背景颜色：＃e5e5e5;\r
}\r
\r
.meter吧{\r
    宽度：100％;\r
    高度：100％;\r
    背景颜色：＃333;\r
    背景图像：线性梯度（顶，＃64b572 0％，＃9fc63d 50％，＃f63908 100％）;\r
    背景尺寸：200像素0;\r
    背景位置：底部;\r
    变换产地：底部;\r
    变换：的scaleY（0）;\r
    过渡：1秒变换自如，背景大小1S放心;\r
    不透明度：0.8;\r
}

\r

＆LT;输入类型=范围最小=0最大=100 步=1值=0＆GT;\r
    \r
＆LT; D​​IV CLASS =米＆GT;\r
    ＆LT; D​​IV CLASS =米吧＆GT;\r
    ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

I am working on an cordova application that allows us to scan rfid tags. Based of the RSSI signal strength I need to display a bar that shows how close or far the rfid tag is. The closer I get to the tag, the higher the bar and the further I go, the smaller the bar becomes. I built the following plunkr, which I thought I could use. Unfortunately the animation is not very smooth and its slow on the mobile application. I think the issue is that I am showing/hiding the divs with a timeout to simulate the animation. I think I may need to change this to use css animations with gradients. But I am not very familiar on how to do this and I have no idea how I would hide part of the gradient if say I want to show just a small part of the bar. Any suggestions on how to do this are greatly appreciated.

Update: I have uploaded a video of what I would like to achieve. Unfortunately I am not able to upload this to SO. The animation would change as I read the tags. So I could be moving the tag back and forth and based off that it should change the bar.

https://www.dropbox.com/s/9bd421fhqvt9v5g/gradient-bar-demo.mov?dl=0

解决方案

For better performance it is best to animate scale rather than height. Source (really good article on animation performance).

Here is an example of how you could do it. It's not perfect but hopefully it should give you a good starting point.

var input = document.querySelector('input');

input.addEventListener('input', function() {
    var value = this.value / 100;
    var bar = document.querySelector('.meter-bar');
    
    bar.style.transform = 'scaleY(' + value + ')';
    // Adjust background size to account for the scale change, there is probably a better solution
    bar.style.backgroundSize = '200px ' + (300 / value) + 'px';
});

input {
    width: 200px;
}

.meter {
    width: 200px;
    height: 300px;
    margin-top: 20px;
    background-color: #e5e5e5;
}

.meter-bar {
    width: 100%;
    height: 100%;
    background-color: #333;
    background-image: linear-gradient(to top, #64b572 0%, #9fc63d 50%, #f63908 100%);
    background-size: 200px 0;
    background-position: bottom;
    transform-origin: bottom;
    transform: scaleY(0);
    transition: transform 1s ease, background-size 1s ease;
    opacity: 0.8;
}

<input type="range" min="0" max="100" step="1" value="0">
    
<div class="meter">
    <div class="meter-bar">
    </div>
</div>

这篇关于创建渐变的CSS和JavaScript动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！