Simulate 3D Hologram effect

| |

Last post show a DIY 3D Hologram Projector for smartphone to view 3D Hologram Video in YouTube. Here I try to simulate the effect in Android App.






MainActivity.java
package com.blogspot.android_er.androidmirror;

import android.animation.ObjectAnimator;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

ImageView image2, image4, image6, image8;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
image2 = (ImageView)findViewById(R.id.image2);
image4 = (ImageView)findViewById(R.id.image4);
image6 = (ImageView)findViewById(R.id.image6);
image8 = (ImageView)findViewById(R.id.image8);

image2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
flipX();
}
});

image4.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
flipY();
}
});

image6.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
flipY();
}
});

image8.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
flipX();
}
});
}

private void flipX(){
ObjectAnimator flip2 = ObjectAnimator.ofFloat(image2, "rotationX", 0f, 360f);
ObjectAnimator flip4 = ObjectAnimator.ofFloat(image6, "rotationY", 0f, 360f);
ObjectAnimator flip6 = ObjectAnimator.ofFloat(image4, "rotationY", 0f, -360f);
ObjectAnimator flip8 = ObjectAnimator.ofFloat(image8, "rotationX", 0f, -360f);
flip2.setDuration(3000);
flip4.setDuration(3000);
flip6.setDuration(3000);
flip8.setDuration(3000);
flip2.start();
flip4.start();
flip6.start();
flip8.start();
}


private void flipY(){
ObjectAnimator flip2 = ObjectAnimator.ofFloat(image2, "rotationY", 0f, 360f);
ObjectAnimator flip4 = ObjectAnimator.ofFloat(image6, "rotationX", 0f, 360f);
ObjectAnimator flip6 = ObjectAnimator.ofFloat(image4, "rotationX", 0f, -360f);
ObjectAnimator flip8 = ObjectAnimator.ofFloat(image8, "rotationY", 0f, -360f);
flip2.setDuration(3000);
flip4.setDuration(3000);
flip6.setDuration(3000);
flip8.setDuration(3000);
flip2.start();
flip4.start();
flip6.start();
flip8.start();
}
}


layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout


android_layout_width="match_parent"
android_layout_height="match_parent"
android_padding="16dp"
android_background="@android:color/black"
tools_context=".MainActivity">

<TextView
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_autoLink="web"
android_text="http://android-er.blogspot.com/"
android_textStyle="bold"
android_layout_alignParentTop="true"/>

<GridLayout
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_columnCount="3"
android_layout_centerInParent="true">
<ImageView
android_layout_width="wrap_content"
android_layout_height="wrap_content"/>
<ImageView
android_id="@+id/image2"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_src="@drawable/androider"
android_layout_gravity="center"/>
<ImageView
android_layout_width="wrap_content"
android_layout_height="wrap_content"/>
<ImageView
android_id="@+id/image4"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_src="@drawable/androider"
android_layout_gravity="center"
android_rotation="270"/>
<ImageView
android_layout_width="20mm"
android_layout_height="20mm"/>
<ImageView
android_id="@+id/image6"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_src="@drawable/androider"
android_layout_gravity="center"
android_rotation="90"/>
<ImageView
android_layout_width="wrap_content"
android_layout_height="wrap_content"/>
<ImageView
android_id="@+id/image8"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_src="@drawable/androider"
android_layout_gravity="center"
android_rotation="180"/>
<ImageView
android_layout_width="wrap_content"
android_layout_height="wrap_content"/>

</GridLayout>
</RelativeLayout>


Where "@drawable/androider" is a 100x100 PNG with alpha channel.

Next:
- Animated GIF (Androidify) for 3D Hologram viewer

Related Posts by Categories

0 comments:

Post a Comment