Question

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

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

假设从滑块输出1到10之间的浮点数，这对应于显示图像的“幸福”。

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

Answer 1

你可以使用CSS的transform: rotateX来做你想做的事。在我的版本中，我还使用了带有input的HTML5 type="range"，但如果您想影响旧浏览器，则可以使用相同的方法使用更全局的滑块。该演示涉及使用两个图像，一个用于脸部和背景，一个用于嘴唇，但如果您喜欢该技术，您可以以相同的方式将其应用于纯CSS。只需确保在javascript中包含所需的所有浏览器前缀

Live Demo Here

/* 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's（这家伙有一些很棒的项目）single element flying bird

如果您想让中间状态更加明显，可以切换中间范围like this demo does中线条的显示。像这个答案的其余部分一样，它只是一个近似的解决方案，但我认为它很好地展示了这项技术。如果你想获得 super 的幻想，你甚至可以为该行添加淡入/淡出以使其看起来更平滑

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的版本 - here's a demo 。我不一定推荐这种方法，但我忍不住给它一个旋转！

这是一个非常简单的方法。我使用了一组单选按钮而不是滑块，它允许您使用: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和一些类。

Answer 4

如果你可以在SVG画脸，你可以使用拉斐尔之类的东西。如果你要保持相同的圆脸，只是变形嘴巴，例如。这将在形状之间进行动画处理。不太确定这是不是你的意思。这是我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来对应到你的滑块。

Answer 5

只需使用没有嘴的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]);} 
}

沿着这些线条的某些东西，如果给滑块的长度足够的迭代，应该会给你一个相当“平滑”的效果。

基于滑块值的平滑动画

5 个答案: