基于滑块值的平滑动画

Question

我有一个基本的HTML Slider元素.我想要制作的很简单 - 当滑块位于一端时,输出一个简单的快乐脸.当它在另一端时,输出一个简单的悲伤面.

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

假设从滑块输出1到10之间的浮点数,这对应于显示图像的"幸福".

你会如何解决这个问题？我试过搜索和谷歌搜索,但没有很好的结果.所有技术都可以接受 - 特别感兴趣的是如何存储图像/动画.

Answer 1

你可以使用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(这个家伙有一些很棒的项目)单元素飞鸟

如果你想让中间状态更加明显,你可以像这个演示那样在中间范围内切换一条线的显示.像这个答案的其余部分一样,它只是一个近似的解决方案,但我认为它很好地展示了这项技术.如果你想获得超级幻想,你甚至可以为线条添加淡入/淡出使其显得更加平滑

Answer 2

我通过使用纯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/

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和一些类.