文字上下滾動的效果
關於這個功能,我目前有兩種方法實現:
一個是在TextView 中加上翻轉的動畫效果,然後設定迴圈滾動;一種是改寫ViewPager 的滾動方向,使它從下到上進行滾動,並設定迴圈滾動;
首先介紹第一種方法:
實現思路:自定義TextView,在TextView中加上從下到上滾動的動畫效果,然後設定迴圈播放;
建立一個AutoTextVieW使之繼承TextView,然後在onDraw方法中呼叫getHeight()方法獲取textview當前的高度。
在接下來的動畫翻轉效果中,根據這個高度設定TextView上下滾動的距離。下面是動畫實現的方法:
/** * 向上脫離螢幕的動畫效果 */ private void animationStart() { ObjectAnimator translate = ObjectAnimator.ofFloat(this, "translationY", 0, -height); ObjectAnimator alpha = ObjectAnimator.ofFloat(this, "alpha", 1f, 0f); mAnimStart = new AnimatorSet(); mAnimStart.play(translate).with(alpha); mAnimStart.setDuration(DURATION); mAnimStart.addListener(this); } /** * 從螢幕下面向上的動畫效果 */ public void animationOver() { ObjectAnimator translate = ObjectAnimator.ofFloat(this, "translationY", height, 0); ObjectAnimator alpha = ObjectAnimator.ofFloat(this, "alpha", 0f, 1f); mAnimOver = new AnimatorSet(); mAnimOver.play(translate).with(alpha); mAnimOver.setDuration(DURATION); }
接下來實現ObjectAnimator的監聽事件,在onAnimationEnd 呼叫setText方法,在動畫沒結束一次更新文字,並且繼續執行動畫效果
@Override
public void onAnimationEnd(Animator animator) {
super.setText(mText);
if (mAnimOver == null) {
animationOver();
}
mAnimOver.start();
}
然後呼叫一個可以設定迴圈滾動的類,這裡可以使用ScheduledExecutorService,也可以使用 Timer幾設定計時滾動,在更新UI的時候,呼叫Handler方法更新;
因為採用Timer執行定時任務時只建立一個執行緒,所以這裡建議採用ScheduledExecutorService;
/** * 獲取資料並設定滾動播放 * @param textView * @param list * @param autoPlayTime */ public void getTextData(final IdeaAutoTextview textView, List<String> list, int autoPlayTime) { this.textView = textView; this.textList = list; if (autoPlayTime != 0) { scheduledExecutorService = Executors.newSingleThreadScheduledExecutor(); scheduledExecutorService.scheduleWithFixedDelay(new WeakTimerTask(this), autoPlayTime, autoPlayTime, TimeUnit.SECONDS); } } private TimeTaskHandler mHandler = new TimeTaskHandler(this); private static class WeakTimerTask extends TimerTask { private WeakReference<IdeaAutoTextview> autoTextReference; public WeakTimerTask(IdeaAutoTextview mautoText) { this.autoTextReference = new WeakReference<>(mautoText); } @Override public void run() { IdeaAutoTextview autoText = autoTextReference.get(); if (autoText != null) { if (autoText.isShown()) { autoText.mHandler.sendEmptyMessage(0); } } else { cancel(); } } }
定時重新整理頻率較高,容易產生記憶體洩漏,這裡採用弱引用避免這個情況發生
private final class TimeTaskHandler extends Handler {
private WeakReference<IdeaAutoTextview> autoTextReference;
public TimeTaskHandler(IdeaAutoTextview autoText) {
this.autoTextReference = new WeakReference<>(autoText);
}
@Override
public void handleMessage(Message msg) {
IdeaAutoTextview autoText = autoTextReference.get();
if (autoText!=null)
{
/**
* 設定當前文字
*/
String text = textList.get(index);
index++;
if (index > textList.size() - 1) {
index = 0;
}
textView.setAutoText(text);
}
}
}
到此第一種方法介紹完畢。
第二種方法實現的原理和輪播圖的原理類似,輪播圖一般是左右橫向滾動,這裡需要把ViewPager改成上下滑動,關於上下滑動的viewpager,可以在給github上找到;
其次輪播圖中播放的是圖片,把圖片換成文字即可;
然後同樣呼叫Timer或者ScheduledExecutorService使ViewPager自行滾動;
以下是程式碼:
package com.idea.idea.viewutils;
import android.content.Context;
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.widget.RelativeLayout;
import java.lang.ref.WeakReference;
import java.util.TimerTask;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;
/**
* todo:修改ViewPager方法實現文字滾動
*
* @author: Create by qjj
* @email: [email protected]
*/
public class AutoViewpager extends RelativeLayout{
private VerticalViewPager mVerticalViewPager;
private PagerAdapter mAdapter;
private int autoPlayTime;
private ScheduledExecutorService scheduledExecutorService;
public AutoViewpager(Context context){
this(context,null);
}
public AutoViewpager(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public AutoViewpager(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
initView();
}
/**
* 初始化view
*/
private void initView(){
if(mVerticalViewPager!=null){
removeView(mVerticalViewPager);
}
mVerticalViewPager = new VerticalViewPager(getContext());
mVerticalViewPager.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
addView(mVerticalViewPager);
}
private final static class TimeTaskHandler extends Handler {
private WeakReference<AutoViewpager> mRollPagerViewWeakReference;
public TimeTaskHandler(AutoViewpager autoViewpager) {
this.mRollPagerViewWeakReference = new WeakReference<>(autoViewpager);
}
@Override
public void handleMessage(Message msg) {
AutoViewpager autoViewpager = mRollPagerViewWeakReference.get();
int cur = autoViewpager.getViewPager().getCurrentItem()+1;
if(cur>= autoViewpager.mAdapter.getCount()){
cur=0;
}
autoViewpager.getViewPager().setCurrentItem(cur);
}
}
private TimeTaskHandler mHandler = new TimeTaskHandler(this);
private static class WeakTimerTask extends TimerTask {
private WeakReference<AutoViewpager> mRollPagerViewWeakReference;
public WeakTimerTask(AutoViewpager mAutoViewpager) {
this.mRollPagerViewWeakReference = new WeakReference<>(mAutoViewpager);
}
@Override
public void run() {
AutoViewpager autoViewpager = mRollPagerViewWeakReference.get();
if (autoViewpager !=null){
if(autoViewpager.isShown()){
autoViewpager.mHandler.sendEmptyMessage(0);
}
}else{
cancel();
}
}
}
/**
* 開始滾動
*/
private void autoPlay(){
if(autoPlayTime<=0||mAdapter == null||mAdapter.getCount()<=1){
return;
}
scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
scheduledExecutorService.scheduleWithFixedDelay(new WeakTimerTask(this), autoPlayTime, autoPlayTime, TimeUnit.SECONDS);
}
public void setAutoTime(int autoPlayTime){
this.autoPlayTime = autoPlayTime;
autoPlay();
}
/**
* viewpager
* @return
*/
public ViewPager getViewPager() {
return mVerticalViewPager;
}
/**
* 設定Adapter
* @param adapter
*/
public void setAdapter(PagerAdapter adapter){
mVerticalViewPager.setAdapter(adapter);
mAdapter = adapter;
dataChanged();
}
private void dataChanged(){
autoPlay();
}
}
相關推薦
js實現文字上下滾動效果【贊】
大家都知道,做html頁面時,為了提升網頁的使用者體驗,我們需要在網頁中加入一些特效,比如單行區域文字上下滾動就是經常用到的特效。如下圖示效果: 完整 html 頁面程式碼,可以直接執行 <html> <head> <title>js實現文字上下滾
iOS文字上下滾動效果的實現
最近有一個文字上下滾動的需求,簡單寫了一下。 @class GYChangeTextView; @protocol GYChangeTextViewDelegate <NSObject> - (void)gyChangeTextView:(GYChangeT
文字上下滾動的效果
關於這個功能,我目前有兩種方法實現: 一個是在TextView 中加上翻轉的動畫效果,然後設定迴圈滾動;一種是改寫ViewPager 的滾動方向,使它從下到上進行滾動,並設定迴圈滾動; 首先介紹第一種方法: 實現思路:自定義TextView,在TextVi
純css3實現文字間歇滾動效果
vue gin span 需要 display () app counter happy 場景: 假設有4條數據或者標題,視口中只顯示兩條,采用每次向上滾動一條數據來展示所有的數據。效果如圖: 用JavaScript也很容易實現,但是需要操作DOM,可以參考這篇博客。考慮
客服菜單上下滾動效果實現
saas on() div config jid function IV fig shai 這是html結構 <!-- 客服 --> <div class="service" id="service"> <img src="./ima
vue實現文字上下滾動
動畫 con vertica pos mar int str borde size 實現文字的上下滾動使用positon的relative的top屬性,通過動態改變top來實現相關內容的更換,通過transion來實現相關的動畫效果, 相關的dom內容 <templa
微信小程式-文字迴圈滾動效果
WXML <swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="1000"> <block wx:for="{{msgList}}">
微信小程式文字迴圈滾動效果
WXML <swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="1000"> <block wx:for="{{
JQuery實現文字無縫滾動效果(Marquee外掛)
推薦一個JQuery的無縫文字滾動效果,同時也可以滾動圖片,也叫做跑馬燈效果。此jquery外掛,依託jquery庫,能實現各種滾動效果,且讓HTML程式碼符合W3C標準。官方演示,如下: Demo使用方法如下:1、載入javascript。<scripttype="te
JQuery實現文字無縫滾動效果 Marquee外掛
推薦一個JQuery的無縫文字滾動效果,同時也可以滾動圖片,也叫做跑馬燈效果。 此jquery外掛,依託jquery庫,能實現各種滾動效果,且讓HTML程式碼符合W3C標準。 官方演示,如下: Demo 使用方法如下: 1、載入javascript。 &
Android TextView 中文字橫向滾動效果實現
字面意思可能不太好理解,那就來個動圖吧 如果想了解更多請到 GitHub 搜尋 跑馬燈 使用系統的 TextView 實現 自定義一個TextView 貌似也可以不用
Android:TextView的垂直滾動效果,和上下滾動效果
佈局裡面就是兩個自定義的TextView,上面的左右滑動的是AutoHorizontalScrollTextView; 下面上下滾動的是AutoVerticalScrollTextView; 上面左右滑動的非常好實現,直接把AutoHorizontalScrollTe
Android自定義View(LimitScrollerView-仿天貓廣告欄上下滾動效果)
最近專案中需要在首頁做一個跑馬燈型別的廣告欄,最後上面決定仿照天貓的廣告欄效果做(中間部位),效果圖如下(右邊是我們的效果): 天貓上搶購那一欄的廣告條可以向上滾動,每次展示一條廣告,展示一定時間後,第二條廣告從下往上頂起。但
文字無縫滾動jQuery上下滾動js效果程式碼
HTML程式碼 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &
HTML文字滾動效果<marquee>
spa down 開始 一次 alternate 設置 離開 rec sta <marquee></marquee> 屬性:(1)behavior:設置滾動方式 a)alternate:在邊框之間來回滾動 b)Scroll:循
銅板街1--TextSwitcher實現文字上下翻牌效果
.net etc nbsp -1 ice del net urn .get tvNotice = (TextSwitcher)rootView.findViewById(R.id.tv_notice); tvNotice.setFactory(new ViewSw
js文字滾動效果實現
<!doctype html> <html> <head> <meta charset="utf-8"> <title>字幕橫向滾動</title> <script src="http://libs.baidu.com/jqu
天貓京東app中常見的上下滾動輪播效果如何實現?
前段時間,公司安排我們團隊製作一個上下滾動輪播效果,類似於我們在天貓京東app中常見的這樣: 哇kao!那麼高大上,完全不會呀??? 幸好,前幾天一個朋友在朋友圈分享了一篇推文。瞬間引領我們走出了迷茫,這個教程特別實用! 做法: • 建立母版,拖入文字元件,輸入文字,將文字元件調整
文字、圖片左右無縫滾動效果--支援拖拽
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>文字、圖片無縫滾動效果--廣告</t
微信小程式:公告字幕滾動播放(文字跑馬燈效果)
一、需求 公告文字僅限200字 公告內容僅限一行文字顯示 公告內容持續滾動 二、解決思路 使用動畫API(Animation.translate),完成移動動畫 使用定時器API(setInterval),完成迴圈播放動畫 注