返回顶部
首页 > 资讯 > 精选 >怎么在Android中实现一个启动页倒计时效果
  • 441
分享到

怎么在Android中实现一个启动页倒计时效果

2023-06-14 14:06:48 441人浏览 泡泡鱼
摘要

本篇文章为大家展示了怎么在Android中实现一个启动页倒计时效果,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。Android是什么Android是一种基于linux内核的自由及开放源代码的操作系统

本篇文章为大家展示了怎么在Android中实现一个启动页倒计时效果,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

Android是什么

Android是一种基于linux内核的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由美国Google公司和开放手机联盟领导及开发

开始准备

新建一个类继承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"                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中实现一个启动页倒计时效果,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注编程网精选频道。

--结束END--

本文标题: 怎么在Android中实现一个启动页倒计时效果

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

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

猜你喜欢
  • 怎么在Android中实现一个启动页倒计时效果
    本篇文章为大家展示了怎么在Android中实现一个启动页倒计时效果,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。Android是什么Android是一种基于Linux内核的自由及开放源代码的操作系统...
    99+
    2023-06-14
  • Android实现启动页倒计时效果
    目录开始准备 开始动画画圆弧项目使用背景图完整代码今天介绍一个很简单的倒计时动画,仿酷狗音乐的启动页倒计时效果,也是大多数APP在用的一个动画,来看看效果图: 整体的思路就是用一个...
    99+
    2024-04-02
  • Android中怎么实现一个倒计时效果
    今天就跟大家聊聊有关Android中怎么实现一个倒计时效果,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。需求:a.在后台添加时,如果是今日直播,则需要添加开始时间(精确到秒);b.离...
    99+
    2023-05-30
    android
  • Android自定义View实现APP启动页倒计时效果
    Android自定义View实现APP启动页倒计时效果,供大家参考,具体内容如下 之前也是做过APP启动页的倒计时效果,但是只有文字变化,没有动画效果,这次通过使用自定义View控件...
    99+
    2024-04-02
  • 怎么在Android中实现一个倒计时功能
    本篇文章给大家分享的是有关怎么在Android中实现一个倒计时功能,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。以30分钟为例写的一个倒计时:public class Main...
    99+
    2023-05-31
    android roi %d
  • 怎么在Android中利用CountDownTimer实现一个倒计时功能
    这篇文章主要介绍了怎么在Android中利用CountDownTimer实现一个倒计时功能,此处通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考价值,需要的朋友可以参考下:Android是什么Android是一种基于Lin...
    99+
    2023-05-30
    android countdowntimer
  • Android使用CountDownTimer实现倒计时效果
    在开发中会经常用到倒计时这个功能,包括给手机发送验证码等等,之前我的做法都是使用Handler + Timer + TimerTask来实现,现在发现了这个类,果断抛弃之前的做...
    99+
    2022-06-06
    倒计时 Android
  • Android实现倒计时的按钮效果
    最近有人问我如何实现倒计时的按钮功能,例如发送验证码,我记得有个CountDownTimer,因为好久没用过了,自己就写了一个,代码如下 new CountDownTimer...
    99+
    2022-06-06
    倒计时 按钮 Android
  • 使用SVG怎么实现一个多彩圆环倒计时效果
    今天就跟大家聊聊有关使用SVG怎么实现一个多彩圆环倒计时效果,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。css实现代码如下:svg { ...
    99+
    2024-04-02
  • Android中怎么利用CountDownTimer实现验证码倒计时效果
    今天就跟大家聊聊有关Android中怎么利用CountDownTimer实现验证码倒计时效果,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。1、需求分析点击按钮之后,按钮文字变为“ns...
    99+
    2023-05-30
    android countdowntimer
  • JavaScript中的canvas 实现一个圆环渐变倒计时效果
    目录前言1、效果图展示2、需求分析3、实现的技术4、实现的过程1. HTML 部分2. SASS部分3. JavaScript部分5、全部源码1.index.html2. style...
    99+
    2024-04-02
  • 怎么在Android应用中实现一个动画效果
    本篇文章给大家分享的是有关怎么在Android应用中实现一个动画效果,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。Android 三种动画详解帧动画一张张图片不断的切换,形成动...
    99+
    2023-05-31
    android roi
  • Android开发中怎么实现一个文字倒影效果
    这期内容当中小编将会给大家带来有关Android开发中怎么实现一个文字倒影效果,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。布局文件中增加如下代码<com.tc.reflect.ReflectTex...
    99+
    2023-05-31
    android roi
  • 怎么在Android中实现列表倒计时
    怎么在Android中实现列表倒计时?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。CountDownTimer类用法  private Count...
    99+
    2023-05-30
    android
  • WPF实现倒计时转场动画效果
    代码如下 一、创建 CountdownTimer.xaml 继承ContentControl代码如下。 using System; using System.Linq; u...
    99+
    2022-11-13
    WPF倒计时动画 WPF 倒计时 WPF 转场 动画
  • 怎么在Android应用中利用View实现一个倒计时功能
    这篇文章将为大家详细讲解有关怎么在Android应用中利用View实现一个倒计时功能,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。Android 自定义View实现倒计时需求:具体方法如下:...
    99+
    2023-05-31
    android roi view
  • 怎么在android应用中利用ViewPager实现一个滑动翻页效果
    这期内容当中小编将会给大家带来有关怎么在android应用中利用ViewPager实现一个滑动翻页效果,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。实现ViewPager的滑动翻页效果可以使用ViewPa...
    99+
    2023-05-31
    viewpager android age
  • CSS3中如何实现倒计时效果
    小编给大家分享一下CSS3中如何实现倒计时效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!实现效果实现代码html<div class='...
    99+
    2023-06-08
  • css怎么实现倒计时翻页动画
    小编给大家分享一下css怎么实现倒计时翻页动画,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!css实现倒计时翻页动画的方法:首先设置外盒子和内盒子;然后内盒子的移动动画的【animation-timing-function...
    99+
    2023-06-13
  • JavaScript中怎么实现一个倒数计时器
    本篇文章给大家分享的是有关JavaScript中怎么实现一个倒数计时器,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。有时,您将需要构建一个Ja...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作