【小程序可用】CSS3 animation 實現的跑馬燈

tianlai 發布于2019-08-20 16:50 / 2731人閱讀

摘要：先放個效果如果能訪問最好主要原理微信小程序現在實際上還是用的，里面搞動畫效率最高的莫過于使用的了。由于微信小程序中無法獲取到對應元素的寬度，這個時間只能寫死或者根據的長度估算出一個值。

最近有個項目里面用到跑馬燈，網上搜了下，雖然有人貼出來過一些實現，但是實際上都存在一些個問題。

哎，再造個輪子吧。

先放個效果：

p.s. 如果能訪問jsfiddle最好：https://jsfiddle.net/650spwen/

主要原理

微信小程序現在實際上還是用的webview，里面搞動畫效率最高的莫過于使用CSS3的animation了。

跑馬燈無非就是一直滾動，這很容易想到使用無限循環的animation.

而一直往左滾動的效果，通過css有很多種方式，比如通過改變left, margin-left, tranform: translateX()都可以實現。但是 left 和 margin-left 一般會導致布局的重新計算。使用transform: translateX()性能會更好一些。

主要實現代碼

首先，視圖模板wxml中：

css3 + animation跑馬燈


    
        {{text}} 
        {{text}} 
        {{text}}

這里為了連續無限滾動，特意復制了2份跑馬燈的內容（.content)。

然后，樣式wxss中：

@keyframes kf-marque-animation{ 0% { transform: translateX(0); } 100% { transform: translateX(-33.3%); } }
.marquee{
    width: 100%;
    height: 44px;
    line-height: 44px;
    background: #fff;
    border: none;
    display: block;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
    position: relative;
    font-size: 28rpx;
}
.marquee .content{
    display: inline-block;
    position: relative;
    padding-right: 0px;
    animation: kf-marque-animation 11.3s linear infinite;
    white-space: nowrap;
}

最后，js里面隨便給 page.data.text 賦值一段文本即可。具體js略。

如果要調整滾動速度，可以設置 .content 的元素的動畫時間（ animation-duration 樣式）。由于微信小程序中無法獲取到對應元素的寬度，這個時間只能寫死或者根據text的長度估算出一個值。

完整的示例在jsfiddle上有個html版本的：https://jsfiddle.net/650spwen/

云服務器 GPU云服務器小程序如何實現小程序如何實現直播微信小程序技術實現實現跑馬燈

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83193.html

SegmentFault 技術周刊 Vol.38 - 神奇的 CSS

摘要：層疊即表示允許以多種方式來描述樣式，一個元素可以被渲染呈現出多種樣式。可以讓屬性的變化過程持續一段時間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個改變是立即生效的，使用后，將按一個曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...

elliott_hu 2019-08-29 13:56 評論0 收藏0
前端插件庫

摘要：原文鏈接前端插件庫站點前端開發文檔博客前端插件庫前端插件庫官網是的函數庫，目的是強化表格操作如搜索排序，并自動加入組件引入表格中，使用非常靈活簡便。由推出，靈活扎實的建議列表函數庫。原文鏈接：前端插件庫站點：前端開發文檔博客：前端插件庫前端插件庫 DataTables 官網：https://www.datatables.net/ DataTables是jQuery的JavaScr...

高勝山 2019-08-26 13:44 評論0 收藏0
前端插件庫

摘要：原文鏈接前端插件庫站點前端開發文檔博客前端插件庫前端插件庫官網是的函數庫，目的是強化表格操作如搜索排序，并自動加入組件引入表格中，使用非常靈活簡便。由推出，靈活扎實的建議列表函數庫。原文鏈接：前端插件庫站點：前端開發文檔博客：前端插件庫前端插件庫 DataTables 官網：https://www.datatables.net/ DataTables是jQuery的JavaScr...

shusen 2019-08-30 10:53 評論0 收藏0
CSS3熱身實戰--過渡與動畫（實現炫酷下拉，手風琴，無縫滾動）

摘要：規定動畫的時長。注意子菜單要用隱藏，在顯示的時候再設置。如果不加，實際上子菜單，以及子菜單下面的一直在頁面上，如果鼠標移上去子菜單，以及子菜單下面的。 1.前言在自己的專欄上寫了十幾篇文章了，都是與js有關的。暫時還沒有寫過關于css3的文章。css3，給我的感覺就是，不難，但是很難玩轉自如。今天，就用css3來實現三個特效，希望這三個特殊能讓大家受到啟發，利用css3做出更好，更炫...

zqhxuyuan 2019-08-29 13:03 評論0 收藏0
發布自己第一個npm 組件包（基于Vue的文字跑馬燈組件）

摘要：所以我把這個為了區分這個組件包是水平方向的，改名為三基于的文字跑馬燈組件大致了解怎么發組件包以后，我們再來看看需要發布出去的組件包怎么寫的。一、前言總結下最近工作上在移動端實現的一個跑馬燈效果，最終效果如下： showImg(https://segmentfault.com/img/remote/1460000009540502?w=555&h=380); 印象中好像HTML標簽的...

edagarli 2019-08-21 15:50 評論0 收藏0