Android App开发手机阅读中贝塞尔曲线的原理讲解及实现波浪起伏动画实战(附源码和演示视频 可直接使用)

简介: Android App开发手机阅读中贝塞尔曲线的原理讲解及实现波浪起伏动画实战(附源码和演示视频 可直接使用)

需要图片集和源码请点赞关注收藏后评论区留言~~~

一、贝塞尔曲线的原理

贝塞尔曲线是一种用于二维图形的数学曲线。贝塞尔曲线由节点和线段构成,其中节点是可拖动的支点,而线段彷佛有弹性的牛皮筋。它除了起点和终点之外,不再描绘中间的折现,而是构建一段运输小球的控制线,控制线本身在移动,然后小球随着在控制线上滑动,小球从起点运动到终点的轨迹便形成了贝塞尔曲线。贝塞尔曲线又可以分为以下三类

1:一次贝塞尔曲线

此时曲线只是一条两点之间的线段

2:二次贝塞尔去信啊

此时除了起点和终点,曲线还存在一个控制点

3:三次贝塞尔曲线

此时除了起点和终点 曲线还存在两个控制点

贝塞尔曲线拥有优美的平滑特性,使得它广泛应用于计算机绘图,Android也自带了与之相关的操作方法 效果如下

实现三次贝塞尔曲线的效果如下

贝塞尔曲线

代码如下

Java类

package com.example.ebook;
import androidx.annotation.RequiresApi;
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.ImageDecoder;
import android.graphics.drawable.Animatable;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.Spinner;
@RequiresApi(api = Build.VERSION_CODES.P)
public class BezierCurveActivity extends AppCompatActivity {
    private ImageView iv_curve; // 声明一个图像视图对象
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bezier_curve);
        iv_curve = findViewById(R.id.iv_curve);
        initCurveSpinner(); // 初始化曲线类型下拉框
    }
    private String[] mCurveArray = {"一次贝塞尔曲线", "二次贝塞尔曲线", "三次贝塞尔曲线" };
    private int[] mDrawableArray = {R.drawable.bezier_first_order, R.drawable.bezier_second_order, R.drawable.bezier_third_order };
    // 初始化曲线类型下拉框
    private void initCurveSpinner() {
        ArrayAdapter<String> curveAdapter = new ArrayAdapter<>(this,
                R.layout.item_select, mCurveArray);
        Spinner sp_curve = findViewById(R.id.sp_curve);
        sp_curve.setPrompt("请选择曲线类型");
        sp_curve.setAdapter(curveAdapter);
        sp_curve.setOnItemSelectedListener(new CurveSelectedListener());
        sp_curve.setSelection(0);
    }
    private class CurveSelectedListener implements AdapterView.OnItemSelectedListener {
        public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
            showBezierCurve(arg2); // 显示贝塞尔曲线的演示动图
        }
        public void onNothingSelected(AdapterView<?> arg0) {}
    }
    // 显示贝塞尔曲线的演示动图
    private void showBezierCurve(int order) {
        int drawableId = mDrawableArray[order];
        try {
            // 利用Android 9.0新增的ImageDecoder读取图片
            ImageDecoder.Source source = ImageDecoder.createSource(getResources(), drawableId);
            // 从数据源解码得到图形信息
            Drawable drawable = ImageDecoder.decodeDrawable(source);
            iv_curve.setImageDrawable(drawable); // 设置图像视图的图形对象
            if (drawable instanceof Animatable) { // 如果是动画图形,则开始播放动画
                ((Animatable) iv_curve.getDrawable()).start();
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

XML文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:paddingLeft="5dp"
            android:gravity="center"
            android:text="请选择曲线类型"
            android:textColor="@color/black"
            android:textSize="17sp" />
        <Spinner
            android:id="@+id/sp_curve"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:spinnerMode="dialog" />
    </LinearLayout>
    <ImageView
        android:id="@+id/iv_curve"
        android:layout_width="match_parent"
        android:layout_height="150dp" />
</LinearLayout>

二、利用贝塞尔曲线实现波浪起伏动画

贝塞尔曲线表面上只是一条静止的曲线,不过通过持续改变曲线的起点位置就能实现曲线的波动特效,比如有人拿着一根绳子,上下反复抖动绳子,这根绳子便会波动展开 实现步骤如下

1:重写自定义视图的onDraw方法 根据起点 终点位置勾勒出一段波浪曲线

2:初始化一个属性动画 随着时间推移逐渐挪动起点的坐标位置

3:提供开始播放动画和停止播放动画两个方法

效果如下

波浪动画

代码如下

Java类

package com.example.ebook;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import androidx.appcompat.app.AppCompatActivity;
import com.example.ebook.widget.WaveView;
public class BezierWaveActivity extends AppCompatActivity {
    private Button btn_start;
    private WaveView wv_wave; // 声明一个波浪视图对象
    private boolean isPlaying = false; // 是否正在播放动画
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bezier_wave);
        wv_wave = findViewById(R.id.wv_wave);
        btn_start = findViewById(R.id.btn_start);
        btn_start.setOnClickListener(v -> {
            if (!isPlaying) {
                wv_wave.startAnim(); // 开始播放波浪动画
            } else {
                wv_wave.stopAnim(); // 停止播放波浪动画
            }
            isPlaying = !isPlaying;
            btn_start.setText(isPlaying?"停止播放动画":"开始播放动画");
        });
    }
}

XML文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <Button
        android:id="@+id/btn_start"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="开始播放动画"
        android:textColor="@color/black"
        android:textSize="17sp" />
    <com.example.ebook.widget.WaveView
        android:id="@+id/wv_wave"
        android:layout_width="match_parent"
        android:layout_height="120dp" />
</LinearLayout>

创作不易 觉得有帮助请点赞关注收藏~~~

相关文章
|
3月前
|
XML Java 数据库
安卓项目:app注册/登录界面设计
本文介绍了如何设计一个Android应用的注册/登录界面,包括布局文件的创建、登录和注册逻辑的实现,以及运行效果的展示。
277 0
安卓项目:app注册/登录界面设计
|
3天前
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
20天前
|
存储 监控 API
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
|
3月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
1523 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
4月前
|
移动开发 Android开发 数据安全/隐私保护
移动应用与系统的技术演进:从开发到操作系统的全景解析随着智能手机和平板电脑的普及,移动应用(App)已成为人们日常生活中不可或缺的一部分。无论是社交、娱乐、购物还是办公,移动应用都扮演着重要的角色。而支撑这些应用运行的,正是功能强大且复杂的移动操作系统。本文将深入探讨移动应用的开发过程及其背后的操作系统机制,揭示这一领域的技术演进。
本文旨在提供关于移动应用与系统技术的全面概述,涵盖移动应用的开发生命周期、主要移动操作系统的特点以及它们之间的竞争关系。我们将探讨如何高效地开发移动应用,并分析iOS和Android两大主流操作系统的技术优势与局限。同时,本文还将讨论跨平台解决方案的兴起及其对移动开发领域的影响。通过这篇技术性文章,读者将获得对移动应用开发及操作系统深层理解的钥匙。
122 12
|
4月前
|
存储 开发工具 Android开发
使用.NET MAUI开发第一个安卓APP
【9月更文挑战第24天】使用.NET MAUI开发首个安卓APP需完成以下步骤:首先,安装Visual Studio 2022并勾选“.NET Multi-platform App UI development”工作负载;接着,安装Android SDK。然后,创建新项目时选择“.NET Multi-platform App (MAUI)”模板,并仅针对Android平台进行配置。了解项目结构,包括`.csproj`配置文件、`Properties`配置文件夹、平台特定代码及共享代码等。
382 2
|
3月前
|
安全 网络安全 Android开发
深度解析:利用Universal Links与Android App Links实现无缝网页至应用跳转的安全考量
【10月更文挑战第2天】在移动互联网时代,用户经常需要从网页无缝跳转到移动应用中。这种跳转不仅需要提供流畅的用户体验,还要确保安全性。本文将深入探讨如何利用Universal Links(仅限于iOS)和Android App Links技术实现这一目标,并分析其安全性。
488 0
|
4月前
|
XML 数据库 Android开发
10分钟手把手教你用Android手撸一个简易的个人记账App
该文章提供了使用Android Studio从零开始创建一个简单的个人记账应用的详细步骤,包括项目搭建、界面设计、数据库处理及各功能模块的实现方法。
|
7月前
|
网络协议 Android开发 数据安全/隐私保护
Android手机上使用Socks5全局代理-教程+软件
Android手机上使用Socks5全局代理-教程+软件
5313 2
|
8月前
|
监控 安全 Android开发
【新手必读】Airtest测试Android手机常见的设置问题
【新手必读】Airtest测试Android手机常见的设置问题
244 0

热门文章

最新文章