javascript - 使用 JavaScript 平滑更改文本

Question

我正在制作一个登陆页面，其中的短语会随着选定的单词而不断变化。例如，

Design better websites
made for clients.

将切换第一个或最后一个单词成为

Develop better websites
made for clients.

但是，由于“开发”这个词比“设计”更大，因此文本的其余部分最终会被推来推去，而无法顺利过渡。请记住，这是一个多行句子，并且居中。

var first  = ['Create','Design','Develop'];
var second = ['you','clients','artists','us'];
var i = 0;
var j = 0;
var maxfirst  = first.length - 1;
var maxsecond = second.length - 1;

function delay() {
    $('#intro').velocity("transi1ion.slideUpIn", 1250);
    setInterval(firstwordchange, 400);
    setInterval(secondwordchange, 500);
}

function firstwordchange() {
    if (i < maxfirst) i++; else i = 0;

    $('#firstword').velocity("transition.slideUpOut", 300);

    setTimeout(function () {
        $('#firstword').text(first[i]);
    }, 200);

  $('#firstword').velocity("transition.slideUpIn", 300);
}

function secondwordchange() {
    if (j < maxsecond) j++; else j = 0;

    $('#secondword').velocity("transition.slideUpOut", 300);

    setTimeout(function () {
        $('#secondword').text(second[j]);
    }, 200);

    $('#secondword').velocity("transition.slideUpIn", 300);
}

setTimeout(delay, 700);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.ui.min.js"></script>
<div id="intro">
    <span id="firstword" class="introchange">Create</span>
    better websites made for
    <span id="secondword" class="introchange">you</span>.
</div>

如何使内部的、不变的文本平滑过渡？

( actual website here )

Answer 1

我将写下我将如何做的大纲:

1. 使用变化的单词的默认初始值和静态定位来渲染句子。
2. 还可以使用 visibility: hide 渲染其他单词变体，以便您确定它们的大小。
3. Absolutize每个句子部分。从此时起，所有内容都将被绝对定位，因此最好在其周围有一个良好的定位上下文(通常使用父级上的 position:relative 完成)。
4. 测量每个句子部分，包括变化的单词和固定句子部分的宽度，包括隐藏的部分。
5. 更改单词时，计算旧尺寸和新尺寸之间的差异。基于这些差异，使用一些非常简单的数学来查看应向左或向右移动多少部分，并对它们应用水平平移(当然，为平移设置动画 - 可能只是为了您想要向左/向右移动的内容，也许您想要其他改变单词的效果)。

演示:

var first = ['Create','Cut','Reticulate'];
var second = ['you','clients','artists','us'];
var firstM = [], secondM = [], el;

var $first = $('.the-first'); 
var $second = $('.the-second'); 
var $container = $('#container');

// init static //    
$first.text(first[0]);
$second.text(second[0]);

// create measurables //
for(var i = 0; i < first.length; i++){
    el = $('<div class="measurable">' + first[i] + '</div>');
    $container.append(el);
    firstM.push(el.width());
}
for(var i = 0; i < second.length; i++){
    el = $('<div class="measurable">' + second[i] + '</div>');
    $container.append(el);
    secondM.push(el.width());
}

// absolutize //
var positions = [];
$('#container > span').each(function(){
    positions.push($(this).position());
});
$('#container > span').each(function(){
    var pos = positions.shift();
    $(this).css({
        position: 'absolute',
        left: pos.left,
        top: pos.top
    });
});

// remember initial sizes //
var firstInitialWidth = $first.width();
var secondInitialWidth = $second.width();

// loop the loop //
var activeWordsIndex = 0;
setInterval(function(){
    activeWordsIndex++;
    var firstIndex = activeWordsIndex % first.length;
    var secondIndex = activeWordsIndex % second.length;
    
    $first.text( first[firstIndex] );
    $second.text( second[secondIndex] );
    
    var firstLineOffset = (firstM[firstIndex] - firstInitialWidth) / 2;
    var secondLineOffset = (secondM[secondIndex] - secondInitialWidth) / 2;
   
    $('.static.first').css({
        transform: 'translateX(' + firstLineOffset + 'px)'
    });
    $('.static.second').css({
        transform: 'translateX(' + (-secondLineOffset) + 'px)'
    });
    
    $first.css({
        transition: 'none', 
        transform: 'translate(' + (-firstLineOffset) + 'px, -30px)',
        opacity: '0'
    });
    setTimeout(function(){
        $first.css({
            transition: 'all 1s ease',
            transform: 'translate(' + (-firstLineOffset) + 'px, 0px)',
            opacity: '1'
        });
    }, 50);
    
    $second.css({
        transition: 'none', 
        transform: 'translate(' + (-secondLineOffset) + 'px, 30px)',
        opacity: '0'
    });
    setTimeout(function(){
        $second.css({
            transition: 'all 1s ease',
            transform: 'translate(' + (-secondLineOffset) + 'px, 0px)',
            opacity: '1'
        });
    }, 50);
}, 2000);

#ubercontainer {
    border: 1px solid #eaeaea;
    border-radius: 2px;
    background-color: #ffefc6;
    width: 500px;
    margin: 20px auto;
    padding: 30px 0;
}
#container {
    position: relative;
    text-align: center;
    font-family: sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #4a6b82;
    height: 78px;
}
.measurable {
    position: absolute;
    visibility: hidden;
}

.static.first, .static.second {
    transition: transform 1s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ubercontainer">
<div id="container">
    <span class="the-first"></span> 
    <span class="static first">better websites </span><br />
    <span class="static second">made for</span> 
    <span class="the-second"></span>
</div>
</div>