填空星星闪烁代码

作者：辽工大-永乐大帝
package cn.mygame.ball;
import java.awt.Color;
import java.awt.Container;
import java.awt.Graphics;

import javax.swing.JFrame;
import javax.swing.JPanel;

public class myJFrame1  extends JFrame{
 
public  myJFrame1(){
 
this.setSize(800,600) ;    //设置窗体大小
myJPanel mj = new myJPanel() ; 
mj.setBackground(Color.BLACK);
this.setBackground(Color.BLACK) ;
//创建一个面板
this.setDefaultCloseOperation(EXIT_ON_CLOSE);
Thread t = new Thread(mj) ;  //生成一个线程类
t.start() ;              //启动线程
Container cn = this.getContentPane() ;   //创建一个容器
cn.add(mj) ; //将面板添加到容器中
this.setVisible(true);
}
 
 
public static void main(String[] args) {
myJFrame1 yt = new myJFrame1() ;
}
}


//自定义一个类继承自JPanel并实现Runnable接口
class myJPanel extends JPanel implements Runnable{
final int shuliang = 400  ; //设置星星数量
int x[] = new int[shuliang] ;
int y[] = new int[shuliang] ;
Color ccc[] = new Color[shuliang] ;//用于设置星星的背景色.
public myJPanel(){
for(int i = 0 ; i < shuliang ; i ++){
x[i] = (int)(Math.random()*800) ;//随机产生400个X轴的坐标点
y[i] = (int)(Math.random()*600) ;// 随机产生400个Y轴的坐标 点
} 
for(int i = 0 ; i < 400 ; i ++) {
ccc[i] = new Color((int)(Math.random()*0xffffff)) ;// 随机产生400背景颜色
}
}
//重写paint方法
public void paint(Graphics g) {
g.clearRect(0 , 0 , 800 , 600) ;  //清除屏幕的内容
for(int i = 0 ; i < shuliang ; i ++){
g.setColor(ccc[i]) ; //设置400个星星的背景颜色
if((int)(Math.random()*150) != 0){
g.drawString("*" , x[i] , y[i]) ;//将星星画出
}
}
}
 
//run方法  线程启动时调用
public void run(){
while(true){
try{Thread.sleep(20) ;}catch(Exception e){}
this.repaint() ;//重画;
} 
} 
}

JS星星闪烁
接下来我们使用Visual Studio这个软件来写一个的方法，我们可以使用这种写法写一个简单的小案例。这个小案例是什么呢。就是运用JS方法然后实现星星闪烁的一个效果。

那么这个代码要怎么写才能让他实现出来呢，首先我们需要先搭建Html的页面。写一些样式让他展示出来。

我们先看一下html的页面截图：

在截图中我们可以看到html页面搭建需要先建立一个建立一个input的标签。在做一个点击的效果。然后在给他一个画布div的id然后我们需要给这两个标签弄一些属性。我们写一些属性、接下来看一下属性的截图：

接下来我们看一下他的效果截图：

我们可以看到一个黑色画布里面还有个星星的效果，那么我们怎么做呢。接下来就是用JS代码然后实现出他的效果，看一下以下的截图：


js代码里面我们可以看第37行。我们先获取页面上id为box的input的标签。然后我们获取到他的id，接着我们写一个onclick点击事件。然后在点击事件里面声明方法。然后给div的标签huabu里面插入一个innerHTML的内容。他是一个span标签里面嵌套的内容。然后声明x和y，parseInt解析他的字符串并且返回一个整数。然后Math.random的意思就是令系统随机选取大于等于0.0且小于1.0的伪随机double的值，然后获取huabu里面第一个元素的子元素。然后获取他的元素让他自动移动x和y的随机字数。然后在给一个500的计时效果。看一下输出的结果：

这样就可以看到huabu里面span的值会在huabu里面随机选取的值进行跳动。这样就可以实现出星星闪烁的效果了。

在Android中，通过创建透明度渐变动画（AlphaAnimation）可以实现图片由显示到逐渐隐藏，再逐渐显示的过程。通过这一个动画可以实现闪烁的星星，

####实现过程

（1）在新建项目的res目录中，首先创建一个名称为anim的目录，并在该目录中，添加一个名称为flare.xml的XML资源文件，在该文件中定义一个实现透明度渐变的动画，该动画为从完全不透明到完全透明，再到完全不透明的渐变过程，具体代码如下：
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha android:fromAlpha = "1"//起始透明度，取值范围0.0--1.0 ，从完全透明到完全不透明
        android:toAlpha = "0"//  结束透明度，取值范围同上
        android:fillAfter = "true"//  动画结束后，保持结束时的状态
        android:repeatMode = "reverse"//重复模式，有reverse和restart两个值，前者为倒序回放，后者为重新开始
        android:repeatCount = "infinite"//  重复次数,取值为-1时无限重复，默认动画执行一次
        android:duration = "2000"//动画持续时间，毫秒为单位
    />
</set>

（2）修改新建项目的res/layout目录下的布局文件activity_main.xml，将默认添加的线性布局管理器和TextView组件删除，添加一个帧布局管理器，并在其中添加一个ImageView组件，代码如下：
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/back"
    android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src = "@drawable/star"
    />

</FrameLayout>

（3）打开默认创建的MainActivity，在其onCreat方法中，首先获取定义的动画资源及要应用动画效果的ImageView组件，然后调用startAnimation方法应用动画效果，从而实现闪烁的星星。代码如下：
package com.example.shenfan.staralpha;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final Animation flare = AnimationUtils.loadAnimation(this,R.anim.flare);//获取"透明度变化"动画资源
        final ImageView iv = (ImageView)findViewById(R.id.imageView1);//获取要应用动画效果的ImageView
        iv.setX(100);//设置星星的X坐标位置
        iv.setY(50);//设置星星的Y坐标位置
        iv.startAnimation(flare);//应用动画效果
    }
}

运行截图如下：






简单来说就是，将背景图和星星都放在一个layout里面，然后给android：background添加背景图，然后再放置一个ImageView，在活动中，只需要将从ImageView获取的id，与另一个layout结合即可，而这另一个layout，就是放置的渐变。
可下载：

https://download.csdn.net/download/ancientear/10672407
在上述实例中也可以实现同时有多颗星星闪烁的效果
1、修改activity_main,在其中添加5个ImageView组件
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/back"
    android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src = "@drawable/star"
    />


        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src = "@drawable/star"
            />

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src = "@drawable/star"
            />

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src = "@drawable/star"
            />

        <ImageView
            android:id="@+id/imageView5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src = "@drawable/star"
            />

</FrameLayout>


2、打开之前的MainActivity，在其onCreat方法中，首先获取定义的动画资源及要应用动画效果的多个ImageView组件，并使用Java中的Random类随机获取ImageView组件的索引，然后饮用该索引调用startAnimation方法应用动画效果，从而实现同时有多个星星闪烁的效果。
package com.example.shenfan.staralpha;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.TextView;

import org.w3c.dom.Text;

import java.util.Random;

public class MainActivity extends AppCompatActivity {

    ImageView[] iv = new ImageView[5];
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final Animation flare = AnimationUtils.loadAnimation(this,R.anim.flare);//获取"透明度变化"动画资源
        iv[0] = (ImageView)findViewById(R.id.imageView1);//获取要应用动画效果的ImageView
        iv[1] = (ImageView)findViewById(R.id.imageView2);
        iv[2] = (ImageView)findViewById(R.id.imageView3);
        iv[3] = (ImageView)findViewById(R.id.imageView4);
        iv[4] = (ImageView)findViewById(R.id.imageView5);
        for(int i = 0 ; i < 5 ; i++) {
            Random random = new Random(new java.util.Date().getTime() + i);
            iv[i].setX(random.nextInt(200) + 50) ;//设置星星的X坐标位置
            iv[i].setY(random.nextInt(20) + 5);//设置星星的Y坐标位置
            iv[i].startAnimation(flare);//应用动画效果
        }
    }
}

CSS
语言：
CSSSCSS
确定
body {
background: black;
}
.shine {
background-image: url(/uploads/150601/shine.png);
background-repeat: no-repeat;
background-position: center;
width: 155px;
height: 155px;
position: absolute;
animation: opacity-change 1s ease-in-out infinite;
-webkit-animation: opacity-change 1s ease-in-out infinite;
-moz-animation: opacity-change 1s ease-in-out infinite;
-o-animation: opacity-change 1s ease-in-out infinite;
}
.shine2 {
animation: opacity-change 1.75s ease-in-out infinite;
-webkit-animation: opacity-change 1.75s ease-in-out infinite;
-moz-animation: opacity-change 1.75s ease-in-out infinite;
-o-animation: opacity-change 1.75s ease-in-out infinite;
}
@keyframes opacity-change {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes opacity-change {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-moz-keyframes opacity-change {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-o-keyframes opacity-change {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}