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>

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

相关文章
|
5天前
|
JSON 编译器 开发工具
VS Code阅读Android源码
VS Code阅读Android源码
11 1
|
5天前
|
测试技术 Android开发
Android App获取不到pkgInfo信息问题原因
Android App获取不到pkgInfo信息问题原因
14 0
|
17天前
|
监控 数据可视化 安全
智慧工地SaaS可视化平台源码,PC端+APP端,支持二开,项目使用,微服务+Java++vue+mysql
环境实时数据、动态监测报警,实时监控施工环境状态,有针对性地预防施工过程中的环境污染问题,打造文明生态施工,创造绿色的生态环境。
14 0
智慧工地SaaS可视化平台源码,PC端+APP端,支持二开,项目使用,微服务+Java++vue+mysql
|
1月前
|
缓存 移动开发 Java
构建高效Android应用:内存优化实战指南
在移动开发领域,性能优化是提升用户体验的关键因素之一。特别是对于Android应用而言,由于设备和版本的多样性,内存管理成为开发者面临的一大挑战。本文将深入探讨Android内存优化的策略和技术,包括内存泄漏的诊断与解决、合理的数据结构选择、以及有效的资源释放机制。通过实际案例分析,我们旨在为开发者提供一套实用的内存优化工具和方法,以构建更加流畅和高效的Android应用。
游戏直播APP平台开发多少钱成本:定制与成品源码差距这么大
开发一款游戏直播APP平台所需的费用是多少?对于计划投身这一领域的投资者来说,首要关心的问题之一就是。本文将探讨两种主要的开发模式——定制开发与成品源码二次开发的成本差异及其优劣势。
|
1月前
|
传感器 人工智能 数据可视化
Java智慧工地监管一体化云平台APP源码 SaaS模式
高支模监测:高支模立杆及倾斜角度,高支模立杆的荷载,架体的水平位移以及模板沉降情况,当检测数据超过预警值时,实时报警。
32 2
|
1月前
|
人工智能 监控 前端开发
Java智慧城管系统源码 数字城管APP系统源码 城市管理综合执法监督系统源码
Java编写的智慧城管系统源码,包含数字城管APP和综合执法监督系统,运用物联网、云计算等技术实现城市全面智慧管理。系统采用微服务架构,Java开发,结合vue前端框架和SpringBoot后端框架,支持MySQL数据库和uniapp移动端。功能模块包括执法办案、视频分析、统计分析等,提升案件办理和监管效能,促进行政执法创新,实现电子送达和非接触执法。
19 1
|
1月前
|
Web App开发 前端开发 网络安全
前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用
【2月更文挑战第21天】前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用
58 1
前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用
|
1月前
|
编解码 小程序 算法
短剧系统开发(网页版/APP/小程序)丨短剧系统开发运营版及源码出售
短剧系统开发功能旨在为用户提供观看、分享和交流短剧作品的平台,涉及多种功能和特性,
|
1月前
|
移动开发 负载均衡 小程序
代驾app开发丨代驾系统开发玩法详情丨代驾系统开发网页版/H5/小程序及源码部署
**司机/代驾员端**:司机可以通过APP接收订单,查看订单详情、路线和导航,提供现场服务并进行确认。

热门文章

最新文章