iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >Android实现流光和光影移动效果代码
  • 135
分享到

Android实现流光和光影移动效果代码

2024-04-02 19:04:59 135人浏览 安东尼
摘要

目录概述:实现思路:代码如下:注意点:概述: 开发过程中,看到有些界面用到一道光线在屏幕中掠过的效果,觉得挺炫的。所以查找相关资料自己实现了一遍。 先上个预览图: 实现思路:

概述:

开发过程中,看到有些界面用到一道光线在屏幕中掠过的效果,觉得挺炫的。所以查找相关资料自己实现了一遍。

先上个预览图:

在这里插入图片描述

实现思路:

简单来说就是在一个view中绘制好一道光影,并不断改变光影在view中的位置。

1.首先我们先了解一下光影怎么绘制

在了解如何绘制之前,我们先看一下LinearGradient的构造方法


 
LinearGradient(float x0, float y0, float x1, float y1, @NonNull @ColorInt int[] colors,
            @Nullable float[] positions, @NonNull TileMode tile)

colors[]和positions[]的说明结合下图,这样理解起来应该就比较明朗了

在这里插入图片描述

回到正题,如何绘制光影。我们看到的那道光可以参照下图:

在这里插入图片描述

根据分析得到我们的着色器是线性着色器(其他着色器请查询相关api):


LinearGradient(a的x坐标, a的y坐标, c的x坐标, c的y坐标, new int[]{Color.parseColor("#00FFFFFF"), Color.parseColor("#FFFFFFFF"), Color.parseColor("#00FFFFFF")}, new float[]{0f, 0.5f, 1f}, Shader.TileMode.CLAMP)

2.给画笔上色。设置着色器mPaint.setShader(mLinearGradient)

3.给定一个数值范围利用数值生成器ValueAnimator产生数值,监听数值变化。每次回调都将该数值传入光影的起点和终点并进行绘制

代码如下:



public class ConfigLoadingView extends View {

    private Paint mPaint;
    private Path mPath;
    private LinearGradient mLinearGradient;
    private ValueAnimator mValueAnimator;

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

    public ConfigLoadingView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ConfigLoadingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mPaint = new Paint();
        mPath = new Path();
    }

    private void initPointAndAnimator(int w, int h) {
        Point point1 = new Point(0, 0);
        Point point2 = new Point(w, 0);
        Point point3 = new Point(w, h);
        Point point4 = new Point(0, h);

        mPath.moveTo(point1.x, point1.y);
        mPath.lineTo(point2.x, point2.y);
        mPath.lineTo(point3.x, point3.y);
        mPath.lineTo(point4.x, point4.y);
        mPath.close();

		// 斜率k
        float k = 1f * h / w;
        // 偏移
        float offset = 1f * w / 2;
		// 0f - offset * 2 为数值左边界(屏幕外左侧), w + offset * 2为数值右边界(屏幕外右侧)
		// 目的是使光影走完一遍,加一些时间缓冲,不至于每次光影移动的间隔都那么急促
        mValueAnimator = ValueAnimator.ofFloat(0f - offset * 2, w + offset * 2);
        mValueAnimator.setRepeatCount(-1);
        mValueAnimator.setInterpolator(new LinearInterpolator());
        mValueAnimator.setDuration(1500);
        mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = (float) animation.getAnimatedValue();
                mLinearGradient = new LinearGradient(value, k * value, value + offset, k * (value + offset),
                        new int[]{Color.parseColor("#00FFFFFF"), Color.parseColor("#1AFFFFFF"), Color.parseColor("#00FFFFFF")}, null, Shader.TileMode.CLAMP);
                mPaint.setShader(mLinearGradient);
                invalidate();
            }
        });
        mValueAnimator.start();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        initPointAndAnimator(widthSize, heightSize);
    }

    @Override
    protected void onDraw(canvas canvas) {
        super.onDraw(canvas);
        canvas.drawPath(mPath, mPaint);
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        mValueAnimator.cancel();
    }
}

注意点:

LinearGradient里参数之一:
color[]参数只能是16进制的RGB数值,不能传R.color.xxx。R.color.xxx虽然是int型,但拿到的是资源ID,并不是16进制RGB

到此这篇关于Android实现流光和光影移动效果代码的文章就介绍到这了,更多相关Android 流光和光影移动效果内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Android实现流光和光影移动效果代码

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

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

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

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

下载Word文档
猜你喜欢
  • Android实现流光和光影移动效果代码
    目录概述:实现思路:代码如下:注意点:概述: 开发过程中,看到有些界面用到一道光线在屏幕中掠过的效果,觉得挺炫的。所以查找相关资料自己实现了一遍。 先上个预览图: 实现思路: ...
    99+
    2024-04-02
  • Android如何实现流光和光影移动效果
    这篇文章将为大家详细讲解有关Android如何实现流光和光影移动效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。概述:开发过程中,看到有些界面用到一道光线在屏幕中掠过的效果,觉得挺炫的。所以查找相关资料...
    99+
    2023-06-22
  • 如何利用Android实现光影流动特效
    本篇内容主要讲解“如何利用Android实现光影流动特效”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何利用Android实现光影流动特效”吧!MaskFilter 类简介MaskFilter...
    99+
    2023-07-02
  • 利用Android实现光影流动特效的方法详解
    目录前言MaskFilter 类简介MaskFilter 的几种效果对比光影流动光影流动效果1光影流动效果2光影流动效果3光影流动效果4:光影沿贝塞尔曲线流动总结前言 Flutter...
    99+
    2024-04-02
  • threejs太阳光与阴影效果实例代码
    目录前言灯光与材质基础篇太阳光整体调用代码太阳光类初始化设置平行光信息Tween总结前言 这篇文章实现智慧城市中模拟太阳光随时间变化产生对应场景效果。为了场景能够更逼真,我们一般会通...
    99+
    2024-04-02
  • WPF实现流光动画特效
    一、代码 <Window.Resources> <!--外--> <Storyboard x:Key="Storyboar...
    99+
    2024-04-02
  • threejs太阳光与阴影效果怎么实现
    这篇文章主要介绍“threejs太阳光与阴影效果怎么实现”,在日常操作中,相信很多人在threejs太阳光与阴影效果怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”threejs太阳光与阴影效果怎么实现...
    99+
    2023-06-29
  • C#WPF实现动态3D光照效果
    目录交互式调节光效给地球点颜色看看交互式调节光效 接下来想动态实现光照效果,即如下图所示 看到这个滚动条,大家可能马上想到,将Slider和Light的内容绑定在一起似乎更容易实现...
    99+
    2023-03-01
    C# WPF动态3D光照效果 C# WPF动态3D光照 C# WPF 光照 C# WPF 3D
  • Android自定义recyclerView实现时光轴效果
    时光轴效果在很多app上都有出现,例如淘宝中快递的跟踪,本文将使用recyclerView实现时光轴效果,我们会到自定义控件,首先先看一下效果图: 接下来是步骤分析 1自定义属性 ...
    99+
    2024-04-02
  • Android自定义recyclerView怎么实现时光轴效果
    这篇文章主要为大家分析了Android自定义recyclerView怎么实现时光轴效果的相关知识点,内容详细易懂,操作细节合理,具有一定参考价值。如果感兴趣的话,不妨跟着跟随小编一起来看看,下面跟着小编一起深入学习“Android自定义re...
    99+
    2023-06-28
  • WPF实现文本描边+外发光效果的示例代码
    解决思路: (1)描边效果可以将文本字符串用GDI+生成Bitmap,然后转成BitmapImage,再用WPF的Image控件显示。 (2)外发光效果用WPF自带的Effect实现...
    99+
    2024-04-02
  • CSS动画:如何实现元素的闪光效果
    CSS动画:如何实现元素的闪光效果,需要具体代码示例在网页设计中,动画效果有时可以为页面带来很好的用户体验。而闪光效果是一种常见的动画效果,它可以使元素更加引人注目。下面将介绍如何使用CSS实现元素的闪光效果。一、闪光的基本实现首先,我们需...
    99+
    2023-11-21
    动画 CSS 闪光
  • CSS动画教程:手把手教你实现流水流光特效
    前言:CSS动画是网页设计中常用的技术,它使得网页更生动有趣,吸引用户的注意力。在这篇教程中,我们将会学习如何使用CSS实现一个流水流光的特效,并提供具体的代码示例。让我们开始吧!第一步:HTML结构首先,我们需要创建一个基本的HTML结构...
    99+
    2023-10-21
    CSS动画 教程 流水流光
  • 如何运用CSS3动画实现高亮光弧效果
    小编给大家分享一下如何运用CSS3动画实现高亮光弧效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!代码如下:<!Doct...
    99+
    2024-04-02
  • 怎么使用C# WPF实现动态3D光照效果
    这篇文章主要介绍“怎么使用C# WPF实现动态3D光照效果”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么使用C# WPF实现动态3D光照效果”文章能帮助大家解决问题。交互式调...
    99+
    2023-07-05
  • css3怎么实现立方体旋转发光效果动图
    本篇内容介绍了“css3怎么实现立方体旋转发光效果动图”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!<...
    99+
    2024-04-02
  • threeJs实现波纹扩散及光标浮动效果详解
    目录版本介绍threejs版本vue版本node版本正文核心代码导入即用1. 新建一个ts文件2. 在要用的页面导入版本介绍 threejs版本 "version": "0.142...
    99+
    2023-03-19
    threeJs波纹扩散光标浮动 threeJs波纹光标
  • threeJs如何实现波纹扩散及光标浮动效果
    这篇“threeJs如何实现波纹扩散及光标浮动效果”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“threeJs如何实现波纹扩...
    99+
    2023-07-05
  • Android开发中使用RecyclerView怎么实现一个时光轴效果
    Android开发中使用RecyclerView怎么实现一个时光轴效果?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。如图:    &nb...
    99+
    2023-05-31
    android recyclerview recycle
  • android实现音乐跳动效果的示例代码
    效果图 实现 整体的流程图如下 上面主要步骤分为3个 1、计算宽度能放下多少列的音频块。 2、计算每一列中音频块的个数 3、绘制音频块 1、计算宽度能放下多少列的音频块。 ...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作