1. 程式人生 > >文字上下滾動的效果

文字上下滾動的效果

關於這個功能,我目前有兩種方法實現:
一個是在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),完成迴圈播放動畫 注