动画,AngularJS:动画速度,以每秒像素为单位?

时间:2016-07-29 12:43:22

标签: css angularjs angularjs-directive

如果我有两行文字一个在另一个上面。每行的内容都是动态的。

有没有办法设置动画速度,以每秒像素为单位?那么无论长度如何,该线都会以相同的速度滚动?

情况示例:

div {
    width: 50%;
    padding-left: 10%;
    float: left;
    height: 50px;
    overflow: hidden;
    position: relative;
}

#line1 {
    background-color: green;
}

#line2 {
    background-color: yellow;
}

h4 {
    position: absolute;
    height: 100%;
    margin: 0;
    line-height: 50px;
    text-align: left;
    /* Apply animation to this element */
    /* Animation delay 0.5s */
    -moz-animation: line-scroll 15s linear 0.5s infinite;
    -webkit-animation: line-scroll 15s linear 0.5s infinite;
    animation: line-scroll 15s linear 0.5s infinite;
}

#line1 h4 {
    /* width must be big enought to fit in whole text othrwise
    whole text will not scroll into view */
    width: 200%;
}

#line2 h4 {
    /* width must be big enought to fit in whole text othrwise
    whole text will not scroll into view */
    width: 600%;
}

@keyframes line-scroll {
    0% {
        -moz-transform: translateX(0%);
        /* Firefox bug fix */
        -webkit-transform: translateX(0%);
        /* Firefox bug fix */
        transform: translateX(0%);
    }
    100% {
        -moz-transform: translateX(-100%);
        /* Firefox bug fix */
        -webkit-transform: translateX(-100%);
        /* Firefox bug fix */
        transform: translateX(-100%);
    }
}
<div id="line1">
    <h4>I don't want to come off as arrogant here, but I'm the greatest botanist on this planet.</h4>
</div>

<div id="line2">
    <h4>Every human being has a basic instinct: to help each other out. If a hiker gets lost in the mountains, people will coordinate a search. If a train crashes, people will line up to give blood. If an earthquake levels a city, people all over the world will send emergency supplies. This is so fundamentally human that it's found in every culture without exception. Yes, there are assholes who just don't care, but they're massively outnumbered by the people who do. ~ Mark Watney, The Martian</h4>
</div>

欢迎使用AngularJS directiveCSS的方式。

2 个答案:

答案 0 :(得分:1)

你可以使用JQuery(javascript)来获取标题的宽度,然后根据宽度计算持续时间,即每个像素的持续时间

width() jquery方法用于获取标题的宽度。

我按如下方式计算持续时间:

1s = 20px

Therefore 100px = 100/20
                = 5s 

您可以在10中增加分母(请参阅数字var dur1=Math.ceil(w1/10))以加快滚动速度。
这是代码

//getting the width of both the headings
var w1=$("#line1>h4").width();
var w2=$("#line2>h4").width();

//calculating the duration of the animation dynamically based on the width
var dur1=Math.ceil(w1/10);
var dur2=Math.ceil(w2/10);

//setting the duration dynamically
$("#line1>h4").css("animation-duration",dur1+"s");
$("#line2>h4").css("animation-duration",dur2+"s");
div {
    width: 50%;
    padding-left: 10%;
    float: left;
    height: 50px;
    overflow: hidden;
    position: relative;
}

#line1 {
    background-color: green;
}

#line2 {
    background-color: yellow;
}

h4 {
    position: absolute;
    height: 100%;
    margin: 0;
    line-height: 50px;
    text-align: left;
    /* Apply animation to this element */
    /* Animation delay 0.5s */
    -moz-animation: line-scroll 15s linear 0.5s infinite;
    -webkit-animation: line-scroll 15s linear 0.5s infinite;
    animation: line-scroll 15s linear 0.5s infinite;
}

#line1 h4 {
    /* width must be big enought to fit in whole text othrwise
    whole text will not scroll into view */
    width: 200%;
}

#line2 h4 {
    /* width must be big enought to fit in whole text othrwise
    whole text will not scroll into view */
    width: 600%;
}

@keyframes line-scroll {
    0% {
        -moz-transform: translateX(0%);
        /* Firefox bug fix */
        -webkit-transform: translateX(0%);
        /* Firefox bug fix */
        transform: translateX(0%);
    }
    100% {
        -moz-transform: translateX(-100%);
        /* Firefox bug fix */
        -webkit-transform: translateX(-100%);
        /* Firefox bug fix */
        transform: translateX(-100%);
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="line1">
    <h4>I don't want to come off as arrogant here, but I'm the greatest botanist on this planet.</h4>
</div>

<div id="line2">
    <h4>Every human being has a basic instinct: to help each other out. If a hiker gets lost in the mountains, people will coordinate a search. If a train crashes, people will line up to give blood. If an earthquake levels a city, people all over the world will send emergency supplies. This is so fundamentally human that it's found in every culture without exception. Yes, there are assholes who just don't care, but they're massively outnumbered by the people who do. ~ Mark Watney, The Martian</h4>
</div>

答案 1 :(得分:0)

在CSS中,您必须提供time units中的动画持续时间,当前为秒/毫秒。

但是,您可以通过从%-value切换到px值来调整转换的宽度,如下所示:

div {
    width: 50%;
    padding-left: 10%;
    float: left;
    height: 50px;
    overflow: hidden;
    position: relative;
}

#line1 {
    background-color: green;
}

#line2 {
    background-color: yellow;
}

h4 {
    position: absolute;
    height: 100%;
    margin: 0;
    line-height: 50px;
    text-align: left;
    /* Apply animation to this element */
    /* Animation delay 0.5s */
    -moz-animation: line-scroll 15s linear 0.5s infinite;
    -webkit-animation: line-scroll 15s linear 0.5s infinite;
    animation: line-scroll 15s linear 0.5s infinite;
}

#line1 h4 {
    /* width must be big enought to fit in whole text othrwise
    whole text will not scroll into view */
    width: 200%;
}

#line2 h4 {
    /* width must be big enought to fit in whole text othrwise
    whole text will not scroll into view */
    width: 600%;
}

@keyframes line-scroll {
    0% {
        -moz-transform: translateX(0%);
        /* Firefox bug fix */
        -webkit-transform: translateX(0%);
        /* Firefox bug fix */
        transform: translateX(0%);
    }
    100% {
        -moz-transform: translateX(-1000px);
        /* Firefox bug fix */
        -webkit-transform: translateX(-1000px);
        /* Firefox bug fix */
        transform: translateX(-1000px);
    }
}
<div id="line1">
    <h4>I don't want to come off as arrogant here, but I'm the greatest botanist on this planet.</h4>
</div>

<div id="line2">
    <h4>Every human being has a basic instinct: to help each other out. If a hiker gets lost in the mountains, people will coordinate a search. If a train crashes, people will line up to give blood. If an earthquake levels a city, people all over the world will send emergency supplies. This is so fundamentally human that it's found in every culture without exception. Yes, there are assholes who just don't care, but they're massively outnumbered by the people who do. ~ Mark Watney, The Martian</h4>
</div>