基于滑块值的平滑动画
Smooth animation based on slider value
我有一个基本的HTML滑块元素。我希望产生的很简单 - 当滑块在一端时,输出一个简单的笑脸。当它在另一端时,输出一个简单的悲伤的脸。
我想要的关键是从动画的一侧到另一侧的平稳过渡 - 所以笑脸会经历冷漠和轻微快乐/轻微悲伤的不同阶段。
假设滑块输出的浮点数在 1 到 10 之间,对应于所显示图像的"幸福感"。
您将如何解决这个问题?我尝试过搜索和谷歌搜索,但没有好的结果。所有技术都是可以接受的 - 对如何存储图像/动画特别感兴趣。
使用CSS的transform: rotateX
来做你想做的事情。在我的版本中,我还使用了HTML5的input
和type="range"
,但是如果您想影响旧浏览器,则可以使用相同的方法和更全局的滑块。该演示涉及使用两个图像,一个用于面部和背景,一个用于嘴唇,但如果您喜欢该技术,您可以以相同的方式将其应用于纯 CSS。只要确保在javascript中包含所需的所有浏览器前缀即可
现场演示在这里
/* HTML */
<div id='slimey'>
<div id='lips'></div>
</div>
<input id="smileSlide" type="range" onchange="changeSmile(this)" value="0" />
/* Javascript */
var lips = document.getElementById('lips');
function changeSmile(slider) {
var sliderVal = slider.value,
rotateDegree = - sliderVal * 1.8;
lips.style.webkitTransform = "rotateX(" + rotateDegree + "deg)";
lips.style.transform = "rotateX(" + rotateDegree + "deg)";
}
/* CSS */
#slimey {
margin:auto;
background:url(http://i.imgur.com/LGQMhc3.jpg);
background-size: 100% 100%;
height:100px;
width:100px;
position:relative;
}
#lips {
width:50px;
height:20px;
position:absolute;
top:calc(70% - 10px);
left:calc(50% - 25px);
background:url(http://i.imgur.com/20EmUM7.gif);
background-size: 100% 100%;
-webkit-transform:rotateX(0deg);
transform:rotateX(0deg);
}
#smileSlide {
width:100px;
position:absolute;
left:calc(50% - 50px);
}
灵感来自Marco Barria(这家伙有一些很棒的项目(单元素飞鸟
如果你想让中间状态更明显,你可以像这个演示一样在中间范围内切换一条线的显示。像这个答案的其余部分一样,它只是一个近似的解决方案,但我认为它很好地展示了这项技术。如果你想变得超级花哨,你甚至可以为线条添加淡入/淡出,让它看起来更平滑一点
我已经通过使用纯 css 和 js (没有任何图像或旋转(更改了 Zeaklous 答案http://jsfiddle.net/sijav/PVvc4/3/
<!--HTML-->
<div id='slimey'>
<div id='leye' class='eye'></div>
<div id='reye' class='eye'></div>
<div id='lips'></div>
</div>
<input id="smileSlide" type="range" onchange="changeSmile(this)" value="0" />
//Java Script
var lips = document.getElementById('lips');
function changeSmile(slider) {
var lh = lips.style.height, slide=0;
if ((50 - slider.value) > 0){
slide = (50 - slider.value);
lips.style.borderTop = "2px black solid";
lips.style.borderBottom = "none";
}
else {
slide = (slider.value - 50);
lips.style.borderBottom = "2px black solid";
lips.style.borderTop = "none";
}
lips.style.height = slide * 0.4 + "px" ;
lips.style.top = "calc(70% + " + (- slide) * 0.2 + "px" ;
}
/**CSS**/
#leye{
left:25%;
}
#reye{
right:25%;
}
.eye{
position:absolute;
background:black;
border-radius:100%;
height:15px;
width:15px;
top:20px;
}
#slimey {
margin:auto;
background:Yellow;
border-radius:100%;
height:100px;
width:100px;
position:relative;
}
#lips {
width:50px;
height:20px;
position:absolute;
top:calc(70% - 10px);
left:calc(50% - 25px);
background:transparent;
border-top:2px black solid;
-webkit-transform:rotateX(0deg);
border-radius:100%;
transform:rotateX(0deg);
}
#smileSlide {
width:100px;
position:absolute;
left:calc(50% - 50px);
}
编辑:嘴唇移动的微小差异 http://jsfiddle.net/sijav/PVvc4/4/
为了好玩,我在午餐时用纯CSS(没有图像或JavaScript(破解了一个仅限Webkit的版本 - 这是一个演示。我不一定推荐这种方法,但我忍不住
试一试!这是一个非常简单的方法。我没有使用滑块,而是使用了一组单选按钮,它允许您使用 :checked
伪类根据所选值更改嘴巴的颜色和形状。嘴型仅用height
和border-radius
来描述。例如:
#feel-0:checked ~ #mouth {
border-radius: 30px 30px 0 0;
height: 20px;
margin-top: -5px;
}
说明性文本只是所选单选按钮的标签字段。最初,所有标签都是隐藏的,但是一旦选中了字段,相邻的标签就会变得可见:
#happiness input:checked + label {
visibility: visible;
}
您可以使用箭头键更改所选字段(直观地向左或向右移动滑块(,这是单选组的内置行为。
通过一些工作,您可以对其进行调整以使滑块在非WebKit浏览器中看起来更好;但是,在某些较旧的浏览器中它可能很卡顿,并且您无法向左或向右拖动滑块。对于生产环境,我会使用 JavaScript 滑块(例如,许多可用的 jQuery 选项之一(,并将 CSS 伪类魔术换成少量的 JS 和少数类。
如果你能在SVG中画脸,你可以使用Raphael这样的东西。例如,如果你要保持相同的圆脸并变形嘴巴。这将在形状之间进行动画处理。不太确定这是否是你的意思。这是我的 2 秒可怕的嘴巴路径。
var paper = Raphael( "canvas_container",400,400);
paper.circle(280, 210, 150);
// create the 2 paths to animate between in some app like inkscape
var pathStr1 = "m385,255l-197,-3l40,57l88,1l35,0l34,-55z",
pathStr2 = "m207,268l162,-1l-33,-45l-41,-2l-46,-1l-32,20l-10,29z";
var path = paper.path(pathStr1).attr({fill: "yellow", "stroke-width": 3});
setTimeout(function(){path.animate({path: pathStr2}, 3000, "linear");}, 1000);
http://jsfiddle.net/YUhHw/1/有一个小提琴和教程,http://cancerbero.mbarreneche.com/raphaeltut/#sec-animation 有更好的示例(上面的代码基于部分(,http://raphaeljs.com/animation.html 我想你需要更改 setTimeout 以对应于你的滑块。
只需使用没有嘴的 png 面,以及几个补间口,这些补间口会根据 Javascript 滑块沿滑块的位置进行切换。将文件存储在数组中,并从定时函数调用它们以检查人脸位置。简单轻便。
var mouthArray = new Array('frown','half_frown','half_smile','smile');
var face = document.getElementById('face');
var faceLoc = parseInt(face.style.left);
function changeMouth() {
if(faceLoc<10)
{theMouth.setAttribute('src',mouthArray[0]);}
if(faceLoc>10,faceLoc<=19)
{theMouth.setAttribute('src',mouthArray[1]);}
if(faceLoc>20,faceLoc<=29)
{theMouth.setAttribute('src',mouthArray[2]);}
if(faceLoc>30,faceLoc<40)
{theMouth.setAttribute('src',mouthArray[3]);}
}
沿着这些思路的东西,如果为滑块的长度提供足够的迭代,应该会给你一个体面的"平滑"效果。
- 如何正确编程jQuery动画与平滑(导航栏)
- 如何平滑地设置twitter引导程序进度条的动画
- jQuery-slideToggle动画不平滑
- 图像动画不平滑
- 在一定百分比上禁用引导进度条的平滑动画过渡
- jQuery:滚动时平滑动画字体大小变化
- jQuery设置的边距顶部使内容跳跃.如何使其平滑动画化
- 如何通过requestAnimationFrame平滑动画
- 请帮助使用加速度计 JavaScript 读取平滑动画
- 基于滑块值的平滑动画
- 如何创建朝向目标的平滑动画
- 饼图标签的平滑动画
- 如何滚动到一个锚点与平滑动画土坯边缘
- 平滑动画背景颜色不透明度后,基础图像加载
- 平滑动画在kinetic.js (html5 canvas)
- javascript平滑动画从X,Y到X1,Y1
- CSS和jQuery模拟时钟-平滑动画
- HTML部分的平滑动画
- 列表视图内部可折叠面板的平滑动画
- 平滑动画在HTML5画布