基于滑块值的光滑动画

Question

我有一个基本的HTML Slider元素。我希望生产的是简单的-当滑块在一端，一个简单的快乐的脸是输出。当它在另一端时，一个简单的悲伤的脸被输出。

我想要的关键是从动画的一边到另一边的平稳过渡--所以笑脸会经历不同阶段的冷漠和轻微的快乐/轻微的悲伤。

假设滑块的输出介于1到10之间，这与显示的图像的“幸福”相对应。

你会如何处理这个问题？我试过搜索和搜索，但没有好的结果。所有可以接受的技术--特别是对如何存储图像/动画感兴趣。

Answer 1

您可以使用CSS的transform: rotateX来做您想做的事情。在我的版本中，我也使用HTML5 5的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);     
}

灵感来自马尔科·巴里亚 (这个家伙有一些很棒的项目)，单元素飞鸟

如果希望使中间状态更加可见，可以切换中间范围就像这个演示中一行的显示。和这个答案的其他部分一样，它只是一个近似解，但我认为它很好地展示了这个技巧。如果你想变得超级花哨，你甚至可以为这一行添加一个淡入/退出，以使它看起来更流畅一些。

Answer 2

我通过使用纯css和js (没有任何图像或旋转) http://jsfiddle.net/sijav/PVvc4/3/更改了Zeaklous的答案。

<!--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/

Answer 3

为了好玩，我在午餐会上用纯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和一些类。