yasic / particletextview

一个用粒子动画显示文字的 Android 自定义 View

ParticleTextView

一、总述

ParticleTextView 是一个 Android 平台的自定义 view 组件，可以用彩色粒子组成指定的文字，并配合多种动画效果和配置属性，呈现出丰富的视觉效果。

二、使用

1. 引入依赖

compile 'yasic.library.ParticleTextView:particletextview:0.0.6'

2. 加入到布局文件中

    <com.yasic.library.particletextview.View.ParticleTextView
        android:id="@+id/particleTextView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

3. 实例化配置信息类 ParticleTextViewConfig

ParticleTextView particleTextView = (ParticleTextView) findViewById(R.id.particleTextView);
RandomMovingStrategy randomMovingStrategy = new RandomMovingStrategy();
ParticleTextViewConfig config = new ParticleTextViewConfig.Builder()
                .setRowStep(8)
                .setColumnStep(8)
                .setTargetText("Random")
                .setReleasing(0.2)
                .setParticleRadius(4)
                .setMiniDistance(0.1)
                .setTextSize(150)
                .setMovingStrategy(randomMovingStrategy)
                .instance();
particleTextView.setConfig(config);

4. 启动动画

particleTextView.startAnimation();

5. 暂停动画

particleTextView1.stopAnimation();

三、API说明

粒子移动轨迹策略 MovingStrategy

移动轨迹策略继承自抽象类 MovingStrategy，可以自己继承并实现其中的 setMovingPath 方法，以下是自带的几种移动轨迹策略。

• RandomMovingStrategy

• CornerStrategy

• HorizontalStrategy

• BidiHorizontalStrategy

• VerticalStrategy

• BidiVerticalStrategy

配置信息类 ParticleTextViewConfig

配置信息类采用工厂模式创建，以下属性均为可选属性。

• 设置显示的文字

setTargetText(String targetText)

• 设置文字大小

setTextSize(int textSize)

• 设置粒子半径

setParticleRadius(float radius)

• 设置横向和纵向像素采样间隔

采样间隔越小生成的粒子数目越多，但绘制帧数也随之降低，建议结合文字大小与粒子半径进行调节。

setColumnStep(int columnStep)
setRowStep(int rowStep)

• 设置粒子运动速度

setReleasing(double releasing)

指定时刻，粒子的运动速度由下列公式决定，其中 Vx 和 Vy 分别是 X 与 Y 方向上的运动速度，target 与 source 分别是粒子的目的坐标与当前坐标

Vx = (targetX - sourceX) * releasing
Vy = (targetY - sourceY) * releasing

• 设置最小判决距离

当粒子与目的坐标距离小于最小判决距离时将直接移动到目的坐标，从而减少不明显的动画过程。

setMiniDistance(double miniDistance)

• 设置粒子颜色域

默认使用完全随机的颜色域

setParticleColorArray(String[] particleColorArray)

• 设置粒子移动轨迹策略

默认使用随机分布式策略

setMovingStrategy(MovingStrategy movingStrategy)

• 设置不同路径间动画的间隔时间

delay < 0 时动画不循环

setDelay(Long delay)

ParticleTextView类

• 指定配置信息类

setConfig(ParticleTextViewConfig config)

• 开启动画

void startAnimation()

• 停止动画

void stopAnimation()

• 获取动画是否暂停

暂停是指动画完成了一段路径后的暂留状态

boolean isAnimationPause()

• 获取动画是否停止

停止是指动画完成了一次完整路径后的停止状态

boolean isAnimationStop()

ParticleTextSurfaceView 类

继承自 SurfaceView 类，利用子线程进行 Canvas 绘制，在多个组件渲染情况下效率更高。所有 API 与 ParticleTextView 类一致。

License

Copyright 2017 Yasic

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

particletextview's Issues

生成文字能改成生成图形吗

Do you know how can I convert ParticleTextView object into GIF?

Hi Yasic,

I have been tried below logic on button click event to generate GIF from ParticleTextView object but it saves file as Jpeg. Please review below image and background coming in black color.

Can you please give some hint to save ParticleTextView object into GIF? It would be very helpful.

public void onClick(View view) {
particleTextView1.buildDrawingCache();
Bitmap image=particleTextView1.getDrawingCache();
ByteArrayOutputStream bos = new ByteArrayOutputStream();
AnimatedGifEncoder encoder = new AnimatedGifEncoder();
encoder.start(bos);
encoder.addFrame(image);
encoder.finish();
byte[] array = bos.toByteArray();
//File output = new File( "abc.gif");
File path = Environment.getExternalStoragePublicDirectory(
Environment.DIRECTORY_PICTURES);
File file = new File(path,"DemoPicture.gif");
path.mkdirs();
try (FileOutputStream fos = new FileOutputStream(file.getPath())) {
fos.write(array);
fos.close();
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}

Memory Spike When Changing Text

When text is cycled, particles are recreated which causes a huge memory spike.

The issue here I believe is that the old particles are not purged from memory before new particles are created. I have isolated the problem to the memory limit. When running on my emulator with 32 GB of memory, no issue appears. However, when running on actual hardware (i.e. 2GB of memory), the application freezes for a few seconds.
In the current state, the feature is unusable. Any ideas?

0.0.6下载不了呢

compile 'yasic.library.ParticleTextView:particletextview:0.0.6'

Issue importing

I get this:

No service of type Factory available in ProjectScopeServices. Open File

颜色的数组

那个颜色的数组应该是什么颜色的，我用的 private String[] particleColorArray={"0xff33aadd"};
或者{"ff33aadd"}，{"33aadd"}都不对

动画完成后有一些散落的点

换了些文字之类的，当粒子动画完成过后，总会出现一些散落的点，这是啥原因

It got fail to resolve

In android it got fail to resolve while implementing in the build.gradle.

为什么使用按钮点击之后来启动动画就没反应呢

我使用六个按钮来实现这六种样式的动画，但是没有反应，是不是不能用按钮呢？还有一个问题就是内存问题，如果我在一个页面要同时显示这六个动画，页面会很卡很卡，有没有什么优化呢？

Change Text Between Refreshes

I would like to be able to pass an array of text to the library and have the text display in successive order. For example, if I send the library:

.setText("This", "Library", "is", "Awesome");

The particles should first form "This", then dissolve and form "Library", and so on.

I am currently working on this feature and will post back tomorrow if I run into issues. Meanwhile, please review PR #4

Thanks for the great library 🎂

good job

写的很好星星给了就是非常卡啊

不知道能不能搞个loading的效果把点阵的制作放在子线程中，
瞎说的，效果很好，进去的时候卡，