iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >Android实现启动页倒计时效果
  • 687
分享到

Android实现启动页倒计时效果

2024-04-02 19:04:59 687人浏览 独家记忆
摘要

目录开始准备 开始动画画圆弧项目使用背景图完整代码今天介绍一个很简单的倒计时动画,仿酷狗音乐的启动页倒计时效果,也是大多数APP在用的一个动画,来看看效果图: 整体的思路就是用一个

今天介绍一个很简单的倒计时动画,仿酷狗音乐的启动页倒计时效果,也是大多数APP在用的一个动画,来看看效果图:

整体的思路就是用一个平滑的帧动画来画圆弧就行了。

这篇文章学到什么?

了解属性动画ValueAnimator的用法

了解动画属性插值Interpolator,让动画过度得更自然

如何画圆弧

开始准备

新建一个类继承TextView,因为中间还有跳过的文本,所以选择用TextView来画个动起来的背景图。



@SuppressLint("AppCompatCustomView")
public class CountDownTextView extends TextView {
    // 倒计时动画时间
    private int duration = 5000;
    // 动画扫过的角度
    private int mSweepAngle = 360;
    // 属性动画
    private ValueAnimator animator;
    // 矩形用来保存位置大小信息
    private final RectF mRect = new RectF();
    // 圆弧的画笔
    private Paint mBackgroundPaint;

    public CountDownTextView(Context context) {
        this(context, null);
    }

    public CountDownTextView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CountDownTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

  private void init() {
        // 设置画笔平滑
        mBackgroundPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        // 设置画笔颜色
        mBackgroundPaint.setColor(Color.WHITE);
        // 设置画笔边框宽度
        mBackgroundPaint.setStrokeWidth(5);
        // 设置画笔样式为边框类型
        mBackgroundPaint.setStyle(Paint.Style.STROKE);
    }
}

开始动画

原理:利用圆的360度角来做属性动画,让它平滑的分配做每帧动画的角度值,然后调用invalidate()来重绘自己本身,从而进入到本身的onDraw()方法来画图。


    
    public void start() {
        // 在动画中
        if (mSweepAngle != 360) return;
        //  初始化属性动画
        animator = ValueAnimator.ofInt(mSweepAngle).setDuration(duration);
        // 设置插值
        animator.setInterpolator(new LinearInterpolator());
        // 设置动画监听
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                // 获取属性动画返回的动画值
                mSweepAngle = (int) animation.getAnimatedValue();
                // 重绘自己
                invalidate();
            }
        });

        // 开始动画
        animator.start();
    }

画圆弧

画圆弧比较简单, 从效果图来看,有的同学可能刚开始以为要画两个圆,一个背景的内圆和一个白色边框的大圆,其实这里可以利用画笔设置画笔样式paint.setStyle()和宽度大小paint.setStrokeWidth()的特性来实现。代码很简单,开始的角度选择-90,从头顶开始画。这样实现的是一个顺时针的倒计时效果。如果你想实现酷狗的逆时针效果,就控制mSweepAngle的值用mSweepAngle = 360 - mSweepAngle开始就可以了。


 @Override
    protected void onDraw(canvas canvas) {
        int padding = dp2px(4);
        mRect.top = padding;
        mRect.left = padding;
        mRect.right = getWidth() - padding;
        mRect.bottom = getHeight() - padding;

        // 画倒计时线内圆
        canvas.drawArc(mRect, //弧线所使用的矩形区域大小
                -90,  //开始角度
                mSweepAngle, //扫过的角度
                false, //是否使用中心
                mBackgroundPaint); // 设置画笔

        super.onDraw(canvas);
    }

什么是插值动画?

为了让动画过度的更加自然或者添加一些动画效果,比如匀速运动、加速运动、减速运动、弹跳运动等等,这些的动画的效果就是靠插值来实现的。在Android中系统内置了一些插值,更加直观的展示下面介绍的动画效果。

插值 说明
LinearInterpolator 以常量速率改变
BounceInterpolator 动画结束的时候弹起
CycleInterpolator 动画循环播放特定的次数,速率改变沿着正弦曲线
DecelerateInterpolator 在动画开始的地方快然后慢
OvershootInterpolator 向前甩一定值后再回到原来位置
AccelerateInterpolator 在动画开始的地方速率改变比较慢,然后开始加速
AnticipateInterpolator 开始的时候向后然后向前甩
AccelerateDecelerateInterpolator 在动画开始与介绍的地方速率改变比较慢,在中间的时候加速
AnticipateOvershootInterpolator 开始的时候向后然后向前甩一定值后返回最后的值

项目使用

这里要定义文本的宽高,因为没有画底部的黑色圆背景,还要设置一下背景图。


 <com.example.viewdemo.CountDownTextView
        android:id="@+id/tv_skip"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center"
        android:background="@drawable/bg_count_down"
        android:text="跳过"
        android:textColor="#ffffff"
        android:textSize="12sp"
        android:visibility="visible" />

背景图


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="Http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="#302d2d2d" />
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <solid android:color="#7F2d2d2d" />
        </shape>
    </item>
</selector>

完整代码



@SuppressLint("AppCompatCustomView")
public class CountDownTextView extends TextView {
    // 倒计时动画时间
    private int duration = 5000;
    // 动画扫过的角度
    private int mSweepAngle = 360;
    // 属性动画
    private ValueAnimator animator;
    // 矩形用来保存位置大小信息
    private final RectF mRect = new RectF();
    // 圆弧的画笔
    private Paint mBackgroundPaint;

    public CountDownTextView(Context context) {
        this(context, null);
    }

    public CountDownTextView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CountDownTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        init();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        int padding = 5;
        mRect.top = padding;
        mRect.left = padding;
        mRect.right = getWidth() - padding;
        mRect.bottom = getHeight() - padding;

        // 画倒计时线内圆
        canvas.drawArc(mRect, //弧线所使用的矩形区域大小
                -90,  //开始角度
                mSweepAngle, //扫过的角度
                false, //是否使用中心
                mBackgroundPaint); // 设置画笔

        start();

        super.onDraw(canvas);
    }

    private void init() {
        // 设置画笔平滑
        mBackgroundPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        // 设置画笔颜色
        mBackgroundPaint.setColor(Color.WHITE);
        // 设置画笔边框宽度
        mBackgroundPaint.setStrokeWidth(5);
        // 设置画笔样式为边框类型
        mBackgroundPaint.setStyle(Paint.Style.STROKE);
    }
    
    public void start() {
        // 在动画中
        if (mSweepAngle != 360) return;
        //  初始化属性动画
        animator = ValueAnimator.ofInt(mSweepAngle).setDuration(duration);
        // 设置插值
        animator.setInterpolator(new LinearInterpolator());
        // 设置动画监听
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                // 获取属性动画返回的动画值
                mSweepAngle = (int) animation.getAnimatedValue();
                // 重绘自己
                invalidate();
            }
        });

        // 开始动画
        animator.start();
    }
}

以上就是Android实现启动页倒计时效果的详细内容,更多关于Android 启动页倒计时的资料请关注编程网其它相关文章!

--结束END--

本文标题: Android实现启动页倒计时效果

本文链接: https://www.lsjlt.com/news/123981.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Android实现启动页倒计时效果
    目录开始准备 开始动画画圆弧项目使用背景图完整代码今天介绍一个很简单的倒计时动画,仿酷狗音乐的启动页倒计时效果,也是大多数APP在用的一个动画,来看看效果图: 整体的思路就是用一个...
    99+
    2024-04-02
  • Android自定义View实现APP启动页倒计时效果
    Android自定义View实现APP启动页倒计时效果,供大家参考,具体内容如下 之前也是做过APP启动页的倒计时效果,但是只有文字变化,没有动画效果,这次通过使用自定义View控件...
    99+
    2024-04-02
  • 怎么在Android中实现一个启动页倒计时效果
    本篇文章为大家展示了怎么在Android中实现一个启动页倒计时效果,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。Android是什么Android是一种基于Linux内核的自由及开放源代码的操作系统...
    99+
    2023-06-14
  • python3实现倒计时效果
    本文实例为大家分享了python3实现倒计时效果的具体代码,供大家参考,具体内容如下 # CountDown.py import turtle,time def drawGap(...
    99+
    2024-04-02
  • WPF实现倒计时转场动画效果
    代码如下 一、创建 CountdownTimer.xaml 继承ContentControl代码如下。 using System; using System.Linq; u...
    99+
    2022-11-13
    WPF倒计时动画 WPF 倒计时 WPF 转场 动画
  • Android中怎么实现一个倒计时效果
    今天就跟大家聊聊有关Android中怎么实现一个倒计时效果,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。需求:a.在后台添加时,如果是今日直播,则需要添加开始时间(精确到秒);b.离...
    99+
    2023-05-30
    android
  • javascript实现简单倒计时效果
    本文实例为大家分享了javascript实现倒计时效果的具体代码,供大家参考,具体内容如下 实现思路: 1、页面创建好天、小时、分、秒的标签元素,定义好样式 2、js获取天、小时、分...
    99+
    2024-04-02
  • Canvas如何实现倒计时效果
    这篇文章主要介绍了Canvas如何实现倒计时效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。HTML:<canvas id...
    99+
    2024-04-02
  • jQuery如何实现页面倒计时并刷新效果
    这篇文章主要介绍jQuery如何实现页面倒计时并刷新效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!代码如下所示:var intDiff = pars...
    99+
    2024-04-02
  • CSS3中如何实现倒计时效果
    小编给大家分享一下CSS3中如何实现倒计时效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!实现效果实现代码html<div class='...
    99+
    2023-06-08
  • vue、react如何实现倒计时效果
    这篇文章主要介绍vue、react如何实现倒计时效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Vue方案一:俩个元素HTML:<div id="exam...
    99+
    2024-04-02
  • JavaScript实现简单的倒计时效果
    本文实例为大家分享了JavaScript实现简单倒计时效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html>     <...
    99+
    2024-04-02
  • js定时器如何实现倒计时效果
    这篇文章主要介绍了js定时器如何实现倒计时效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体内容如下日期函数倒计时 =  用 ...
    99+
    2024-04-02
  • Android使用ViewPager实现启动引导页效果
    本文实例为大家分享了Android实现启动引导页效果的具体代码,供大家参考,具体内容如下 ViewPagerTwoActivity.java package cn.edu.zu...
    99+
    2024-04-02
  • Android实现圆圈倒计时
    本文实例为大家分享了Android实现圆圈倒计时的具体代码,供大家参考,具体内容如下 1. 显示效果如下 2. 首先是创建shape的xml文件 在res/drawable目录下创...
    99+
    2022-11-13
    Android 倒计时
  • css怎么实现倒计时翻页动画
    小编给大家分享一下css怎么实现倒计时翻页动画,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!css实现倒计时翻页动画的方法:首先设置外盒子和内盒子;然后内盒子的移动动画的【animation-timing-function...
    99+
    2023-06-13
  • Android中怎么利用CountDownTimer实现验证码倒计时效果
    今天就跟大家聊聊有关Android中怎么利用CountDownTimer实现验证码倒计时效果,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。1、需求分析点击按钮之后,按钮文字变为“ns...
    99+
    2023-05-30
    android countdowntimer
  • jquery 倒计时效果实现秒杀思路
    复制代码 代码如下: <script type="text/javascript"> $(function(){ countDown("2015/9/8 11:11:59...
    99+
    2022-11-15
    jquery 倒计时
  • Android实现时间倒计时功能
    本文实例为大家分享了Android实现时间倒计时功能展示的具体代码,供大家参考,具体内容如下效果展示MainActivity(主页面代码)public class MainActivity extends Activity { priva...
    99+
    2023-05-30
    android 倒计时 roi
  • js如何通过Date对象实现倒计时动画效果
    小编给大家分享一下js如何通过Date对象实现倒计时动画效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!js通过Date对象实...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作