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

Read More..

Interpolator effect on ObjectAnimator


This post demo various Interpolator effect on ObjectAnimator. You can also download the demo APK, from the link on the bottom.


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

import android.animation.ObjectAnimator;
import android.animation.TimeInterpolator;
import android.os.Bundle;
import android.support.v4.view.animation.FastOutLinearInInterpolator;
import android.support.v4.view.animation.FastOutSlowInInterpolator;
import android.support.v4.view.animation.LinearOutSlowInInterpolator;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.AnticipateInterpolator;
import android.view.animation.AnticipateOvershootInterpolator;
import android.view.animation.BounceInterpolator;
import android.view.animation.CycleInterpolator;
import android.view.animation.DecelerateInterpolator;
import android.view.animation.LinearInterpolator;
import android.view.animation.OvershootInterpolator;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

LinearLayout playGround;
ImageView image;

AccelerateDecelerateInterpolator accelerateDecelerateInterpolator;
AccelerateInterpolator accelerateInterpolator;
AnticipateInterpolator anticipateInterpolator;
AnticipateOvershootInterpolator anticipateOvershootInterpolator;
BounceInterpolator bounceInterpolator;
CycleInterpolator cycleInterpolator;
DecelerateInterpolator decelerateInterpolator;
FastOutLinearInInterpolator fastOutLinearInInterpolator;
FastOutSlowInInterpolator fastOutSlowInInterpolator;
LinearInterpolator linearInterpolator;
LinearOutSlowInInterpolator linearOutSlowInInterpolator;
OvershootInterpolator overshootInterpolator;

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

playGround = (LinearLayout)findViewById(R.id.playground);
image = (ImageView)findViewById(R.id.image);
image.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "Clicked!", Toast.LENGTH_SHORT).show();
}
});

Button btnNull = (Button)findViewById(R.id.bNull);
btnNull.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
prepareObjectAnimator(null);
}
});

Button btnAccelerateDecelerateInterpolator
= (Button)findViewById(R.id.bAccelerateDecelerateInterpolator);
btnAccelerateDecelerateInterpolator.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
prepareObjectAnimator(accelerateDecelerateInterpolator);
}
});

Button btnAccelerateInterpolator = (Button)findViewById(R.id.bAccelerateInterpolator);
btnAccelerateInterpolator.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
prepareObjectAnimator(accelerateInterpolator);
}
});

Button btnAnticipateInterpolator = (Button)findViewById(R.id.bAnticipateInterpolator);
btnAnticipateInterpolator.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
prepareObjectAnimator(anticipateInterpolator);
}
});

Button btnAnticipateOvershootInterpolator
= (Button)findViewById(R.id.bAnticipateOvershootInterpolator);
btnAnticipateOvershootInterpolator.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
prepareObjectAnimator(anticipateOvershootInterpolator);
}
});

Button btnBounceInterpolator = (Button)findViewById(R.id.bBounceInterpolator);
btnBounceInterpolator.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
prepareObjectAnimator(bounceInterpolator);
}
});

Button btnCycleInterpolator = (Button)findViewById(R.id.bCycleInterpolator);
btnCycleInterpolator.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
prepareObjectAnimator(cycleInterpolator);
}
});

Button btnDecelerateInterpolator = (Button)findViewById(R.id.bDecelerateInterpolator);
btnDecelerateInterpolator.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
prepareObjectAnimator(decelerateInterpolator);
}
});

Button btnFastOutLinearInInterpolator
= (Button)findViewById(R.id.bFastOutLinearInInterpolator);
btnFastOutLinearInInterpolator.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
prepareObjectAnimator(fastOutLinearInInterpolator);
}
});

Button btnFastOutSlowInInterpolator
= (Button)findViewById(R.id.bFastOutSlowInInterpolator);
btnFastOutSlowInInterpolator.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
prepareObjectAnimator(fastOutSlowInInterpolator);
}
});

Button btnLinearInterpolator = (Button)findViewById(R.id.bLinearInterpolator);
btnLinearInterpolator.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
prepareObjectAnimator(linearInterpolator);
}
});

Button btnOvershootInterpolator = (Button)findViewById(R.id.bOvershootInterpolator);
btnOvershootInterpolator.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
prepareObjectAnimator(overshootInterpolator);
}
});

Button btnLinearOutSlowInInterpolator
= (Button)findViewById(R.id.bLinearOutSlowInInterpolator);
btnLinearOutSlowInInterpolator.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
prepareObjectAnimator(linearOutSlowInInterpolator);
}
});

prepareInterpolator();
}

private void prepareInterpolator(){
accelerateDecelerateInterpolator = new AccelerateDecelerateInterpolator();
accelerateInterpolator = new AccelerateInterpolator();
anticipateInterpolator = new AnticipateInterpolator();
anticipateOvershootInterpolator = new AnticipateOvershootInterpolator();
bounceInterpolator = new BounceInterpolator();
cycleInterpolator = new CycleInterpolator(2);
decelerateInterpolator = new DecelerateInterpolator();
fastOutLinearInInterpolator = new FastOutLinearInInterpolator();
fastOutSlowInInterpolator = new FastOutSlowInInterpolator();
linearInterpolator = new LinearInterpolator();
linearOutSlowInInterpolator = new LinearOutSlowInInterpolator();
overshootInterpolator = new OvershootInterpolator();
}

private void prepareObjectAnimator(TimeInterpolator timeInterpolator){
//float w = (float)playGround.getWidth();
float h = (float)playGround.getHeight();
float propertyStart = 0f;
float propertyEnd = -(h/2 - (float)image.getHeight()/2);
String propertyName = "translationY";
ObjectAnimator objectAnimator
= ObjectAnimator.ofFloat(image, propertyName, propertyStart, propertyEnd);
objectAnimator.setDuration(2000);
objectAnimator.setRepeatCount(1);
objectAnimator.setRepeatMode(ObjectAnimator.REVERSE);
objectAnimator.setInterpolator(timeInterpolator);
objectAnimator.start();
}
}


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

android_layout_width="match_parent"
android_layout_height="match_parent"
android_orientation="horizontal"
android_padding="16dp"
tools_context=".MainActivity">

<LinearLayout
android_layout_width="0dp"
android_layout_height="match_parent"
android_layout_weight="1"
android_orientation="vertical">

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

<LinearLayout
android_id="@+id/playground"
android_layout_width="match_parent"
android_layout_height="match_parent"
android_layout_margin="10dp"
android_background="#E0E0E0"
android_gravity="center"
android_orientation="vertical">

<ImageView
android_id="@+id/image"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_gravity="center"
android_src="@mipmap/ic_launcher" />
</LinearLayout>
</LinearLayout>

<ScrollView
android_layout_width="0dp"
android_layout_height="match_parent"
android_layout_weight="1">

<LinearLayout
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_orientation="vertical">

<Button
android_id="@+id/bNull"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_text="Interpolator = null (LinearInterpolator)"
android_textAllCaps="false" />

<Button
android_id="@+id/bAccelerateDecelerateInterpolator"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_text="AccelerateDecelerateInterpolator (default)"
android_textAllCaps="false" />

<Button
android_id="@+id/bAccelerateInterpolator"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_text="AccelerateInterpolator"
android_textAllCaps="false" />

<Button
android_id="@+id/bAnticipateInterpolator"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_text="AnticipateInterpolator"
android_textAllCaps="false" />

<Button
android_id="@+id/bAnticipateOvershootInterpolator"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_text="AnticipateOvershootInterpolator"
android_textAllCaps="false" />

<Button
android_id="@+id/bBounceInterpolator"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_text="BounceInterpolator"
android_textAllCaps="false" />

<Button
android_id="@+id/bCycleInterpolator"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_text="CycleInterpolator"
android_textAllCaps="false" />

<Button
android_id="@+id/bDecelerateInterpolator"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_text="DecelerateInterpolator"
android_textAllCaps="false" />

<Button
android_id="@+id/bFastOutLinearInInterpolator"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_text="FastOutLinearInInterpolator"
android_textAllCaps="false" />

<Button
android_id="@+id/bFastOutSlowInInterpolator"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_text="FastOutSlowInInterpolator"
android_textAllCaps="false" />

<Button
android_id="@+id/bLinearInterpolator"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_text="LinearInterpolator"
android_textAllCaps="false" />

<Button
android_id="@+id/bLinearOutSlowInInterpolator"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_text="LinearOutSlowInInterpolator"
android_textAllCaps="false" />

<Button
android_id="@+id/bOvershootInterpolator"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_text="OvershootInterpolator"
android_textAllCaps="false" />

</LinearLayout>

</ScrollView>

</LinearLayout>



download filesDownload the files (Android Studio Format) .

download filesDownload the demo APK.


~ Old example of Various effect of interpolator in Android Animation

Read More..

Blog Archive

Powered by Blogger.