۱۹
آبان

جلسه ۲۵ : انیمیشن در اندروید

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش برنامه نویسی اندروید را دنبال می کنند. انیمیشن در اندروید یکی از قابلیت های پرکاربرد در اندروید است که با استفاده از آن شما می توانید به یک آبجکت در صفحه برنامه های خود رفتارهای خاصی از جمله حرکت کردن ، چرخش ، تغییر اندازه و … را در یک بازه ی زمانی پیاده سازی کنید، انیمیشن در Android با روشهای مختلفی قابل پیاده سازی است، در این بخش ما به شما یک روش آسان و جامع را برای پیاده سازی انیمیشن در اندروید را آموزش خواهیم داد، برای آشنایی با چگونگی استفاده از Animation در اندروید در ادامه ی مباحث این بخش با ما همراه باشید.

آشنایی با Animation در اندروید

در ادامه ی این مبحث ما به شما چگونگی کار با انیمیشن در اندروید را در قالب یک مثال ساده آموزش خواهیم داد.

انیمیشن در واقع یک فرآیند ایجاد حرکت و تغییر شکل روی یک تصویر یا آبجکت است.

در ادامه ی این آموزش به شما چگونگی ایجاد انیمیشن Tween را آموزش خواهیم داد.

انیمیشن Tween

انیمیشن Tween شامل برخی از پارامترها مانند مقدار شروع، مقدار پایان، اندازه، مدت زمان، زاویه چرخش و… است.

این می تواند به هر نوع آبجکتی مورد اعمال شود. بنابراین برای استفاده از این قابلیت، اندروید یک کلاس به نام Animation ارائه کرده است.

برای انجام انیمیشن در اندروید، ما یک تابع () static loadAnimation از کلاس AnimationUtils را فرخوانی می کنیم.

ما قصد داریم نتیجه را در نمونه ای از شیء Animation دریافت کنیم. ساختار تعریف این آبجکت به صورت زیر است:

مثال :

Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), 
   R.anim.myanimation);

1 2	Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.myanimation);

پارامتر دوم نام فایل xml ما است، که طراحی را نگه می دارد.

شما باید یک پوشه جدید به نام anim زیر دایرکتوری res ایجاد کرده و یک فایل xml نیز در زیر پوشه anim ایجاد کنید.

این کلاس Animation دارای بسیاری از توابع مفید است که در زیر ذکر شده است:

ردیف	متد و توضیحات مربوطه
۱	`start()` این متد یک animation را شروع می کند.
۲	`setDuration(long duration)` این متد مدت زمان یک animation را تنظیم می کند.
۳	`getDuration()` این متد مدت طول کشیدن است که توسط متد فوق تعیین می شود
۴	`end()` این متد پایان انیمیشن را نشان می دهد.
۵	`cancel()` این متد یک انیمیشن را کنسل می کند.

برای اعمال این انیمیشن به یک شی، ما فقط از متد () startAnimation برای شی استفاده خواهیم کرد. ساختار آن به صورت زیر است:

مثال :

ImageView image1 = (ImageView)findViewById(R.id.imageView1);
image.startAnimation(animation);

1 2	ImageView image1 = (ImageView)findViewById(R.id.imageView1); image.startAnimation(animation);

مثال

مثال زیر چگونگی استفاده از Animation را نشان می دهد، در این مثال شما می توانید نوع انیمیشن را از یک منو انتخاب می کنید.

انیمیشن انتخاب شده روی imageView بر روی صفحه اعمال خواهد شد.

مراحل انجام کار به صورت زیر است:

مراحل	توضیحات
۱	مراحل ایجاد برنامه در اندروید استدیو را طبق بخش های قبلی دنبال کرده و نام پکیج را com.pvlearn.pvlearn.myapplication قرار بدهید.
۲	به محتوای فایل src/MainActivity.java کد مربوطه به پیاده سازی انیمیشن را اضافه کنید.
۳	طراحی رابط کاربری برنامه را در فایل res/layout/activity_main.xml اضافه کنید.
۴	یک فولدر جدید در زیر دایرکتوری res اضافه کرده و آن را .anim تنظیم کنید.
۵	روی فایل anim راست کلیک کرده و Android XML را انتخاب کنید.
۶	فایل های myanimation.xml,clockwise.xml,fade.xml,move.xml,blink.xml,slide.xml را ایجاد کرده و کد XML را به آن ها اضافه کنید.
۷	نیازی به تغییر دادن ثابت های رشته ای نیست.
۸	برنامه را اجرا کنید تا شبیه ساز اندروید نتیجه را نمایش دهد.

محتوای فایل MainActivity.java بصورت زیر است:

مثال :

package com.example.Pvlearn.myapplication;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends Activity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
   }
   
   public void clockwise(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), 
         R.anim.myanimation);
      image.startAnimation(animation);
   }
   
   public void zoom(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation1 = AnimationUtils.loadAnimation(getApplicationContext(), 
         R.anim.clockwise);
      image.startAnimation(animation1);
   }
   
   public void fade(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation1 = 
         AnimationUtils.loadAnimation(getApplicationContext(), 
            R.anim.fade);
      image.startAnimation(animation1);
   }
   
   public void blink(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation1 = 
         AnimationUtils.loadAnimation(getApplicationContext(), 
            R.anim.blink);
      image.startAnimation(animation1);
   }
   
   public void move(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation1 = 
         AnimationUtils.loadAnimation(getApplicationContext(), R.anim.move);
      image.startAnimation(animation1);
   }
   
   public void slide(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation1 = 
         AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide);
      image.startAnimation(animation1);
   }
}

package com.example.Pvlearn.myapplication;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.widget.ImageView;

import android.widget.Toast;

public class MainActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

}

public void clockwise(View view){

ImageView image = (ImageView)findViewById(R.id.imageView);

Animation animation = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.myanimation);

image.startAnimation(animation);

}

public void zoom(View view){

ImageView image = (ImageView)findViewById(R.id.imageView);

Animation animation1 = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.clockwise);

image.startAnimation(animation1);

}

public void fade(View view){

ImageView image = (ImageView)findViewById(R.id.imageView);

Animation animation1 =

AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.fade);

image.startAnimation(animation1);

}

public void blink(View view){

ImageView image = (ImageView)findViewById(R.id.imageView);

Animation animation1 =

AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.blink);

image.startAnimation(animation1);

}

public void move(View view){

ImageView image = (ImageView)findViewById(R.id.imageView);

Animation animation1 =

AnimationUtils.loadAnimation(getApplicationContext(), R.anim.move);

image.startAnimation(animation1);

}

public void slide(View view){

ImageView image = (ImageView)findViewById(R.id.imageView);

Animation animation1 =

AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide);

image.startAnimation(animation1);

}

محتوای فایل res/layout/activity_main.xml به صورت زیر خواهد بود:

مثال :

<RelativeLayout 
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools" 
   android:layout_width="match_parent"
   android:layout_height="match_parent" 
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
   
   <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Alert Dialog"
      android:id="@+id/textView"
      android:textSize="35dp"
      android:layout_alignParentTop="true"
      android:layout_centerHorizontal="true" />
      
   <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Tutorialspoint"
      android:id="@+id/textView2"
      android:textColor="#ff3eff0f"
      android:textSize="35dp"
      android:layout_below="@+id/textView"
      android:layout_centerHorizontal="true" />
      
   <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/imageView"
      android:src="@drawable/abc"
      android:layout_below="@+id/textView2"
      android:layout_alignRight="@+id/textView2"
      android:layout_alignEnd="@+id/textView2"
      android:layout_alignLeft="@+id/textView"
      android:layout_alignStart="@+id/textView"/>
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="zoom"
      android:id="@+id/button"
      android:layout_below="@+id/imageView"
      android:layout_alignParentLeft="true"
      android:layout_alignParentStart="true"
      android:layout_marginTop="40dp"
      android:onClick="clockwise"/>
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="clockwise"
      android:id="@+id/button2"
      android:layout_alignTop="@+id/button"
      android:layout_centerHorizontal="true"
      android:onClick="zoom"/>
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="fade"
      android:id="@+id/button3"
      android:layout_alignTop="@+id/button2"
      android:layout_alignParentRight="true"
      android:layout_alignParentEnd="true"
      android:onClick="fade"/>
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="blink"
      android:onClick="blink"
      android:id="@+id/button4"
      android:layout_below="@+id/button"
      android:layout_alignParentLeft="true"
      android:layout_alignParentStart="true" />
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="move"
      android:onClick="move"
      android:id="@+id/button5"
      android:layout_below="@+id/button2"
      android:layout_alignRight="@+id/button2"
      android:layout_alignEnd="@+id/button2"
      android:layout_alignLeft="@+id/button2"
      android:layout_alignStart="@+id/button2" />
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="slide"
      android:onClick="slide"
      android:id="@+id/button6"
      android:layout_below="@+id/button3"
      android:layout_toRightOf="@+id/textView"
      android:layout_toEndOf="@+id/textView" />
      
</RelativeLayout>

100

101

102

103

<RelativeLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Alert Dialog"

android:id="@+id/textView"

android:textSize="35dp"

android:layout_alignParentTop="true"

android:layout_centerHorizontal="true" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Tutorialspoint"

android:id="@+id/textView2"

android:textColor="#ff3eff0f"

android:textSize="35dp"

android:layout_below="@+id/textView"

android:layout_centerHorizontal="true" />

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/imageView"

android:src="@drawable/abc"

android:layout_below="@+id/textView2"

android:layout_alignRight="@+id/textView2"

android:layout_alignEnd="@+id/textView2"

android:layout_alignLeft="@+id/textView"

android:layout_alignStart="@+id/textView"/>

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="zoom"

android:id="@+id/button"

android:layout_below="@+id/imageView"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true"

android:layout_marginTop="40dp"

android:onClick="clockwise"/>

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="clockwise"

android:id="@+id/button2"

android:layout_alignTop="@+id/button"

android:layout_centerHorizontal="true"

android:onClick="zoom"/>

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="fade"

android:id="@+id/button3"

android:layout_alignTop="@+id/button2"

android:layout_alignParentRight="true"

android:layout_alignParentEnd="true"

android:onClick="fade"/>

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="blink"

android:onClick="blink"

android:id="@+id/button4"

android:layout_below="@+id/button"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true" />

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="move"

android:onClick="move"

android:id="@+id/button5"

android:layout_below="@+id/button2"

android:layout_alignRight="@+id/button2"

android:layout_alignEnd="@+id/button2"

android:layout_alignLeft="@+id/button2"

android:layout_alignStart="@+id/button2" />

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="slide"

android:onClick="slide"

android:id="@+id/button6"

android:layout_below="@+id/button3"

android:layout_toRightOf="@+id/textView"

android:layout_toEndOf="@+id/textView" />

</RelativeLayout>

کد فایل res/anim/myanimation.xml به صورت زیر است:

مثال :

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

   <scale xmlns:android="http://schemas.android.com/apk/res/android"
      android:fromXScale="0.5"
      android:toXScale="3.0"
      android:fromYScale="0.5"
      android:toYScale="3.0"
      android:duration="5000"
      android:pivotX="50%"
      android:pivotY="50%" >
   </scale>
   
   <scale xmlns:android="http://schemas.android.com/apk/res/android"
      android:startOffset="5000"
      android:fromXScale="3.0"
      android:toXScale="0.5"
      android:fromYScale="3.0"
      android:toYScale="0.5"
      android:duration="5000"
      android:pivotX="50%"
      android:pivotY="50%" >
   </scale>
   
</set>

<?xml version="1.0" encoding="utf-8"?>

<scale xmlns:android="http://schemas.android.com/apk/res/android"

android:fromXScale="0.5"

android:toXScale="3.0"

android:fromYScale="0.5"

android:toYScale="3.0"

android:duration="5000"

android:pivotX="50%"

android:pivotY="50%" >

</scale>

<scale xmlns:android="http://schemas.android.com/apk/res/android"

android:startOffset="5000"

android:fromXScale="3.0"

android:toXScale="0.5"

android:fromYScale="3.0"

android:toYScale="0.5"

android:duration="5000"

android:pivotX="50%"

android:pivotY="50%" >

</scale>

</set>

کد فایل res/anim/clockwise.xml به صورت زیر خواهد بود:

مثال :

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

   <rotate xmlns:android="http://schemas.android.com/apk/res/android"
      android:fromDegrees="0"
      android:toDegrees="360"
      android:pivotX="50%"
      android:pivotY="50%"
      android:duration="5000" >
   </rotate>
   
   <rotate xmlns:android="http://schemas.android.com/apk/res/android"
      android:startOffset="5000"
      android:fromDegrees="360"
      android:toDegrees="0"
      android:pivotX="50%"
      android:pivotY="50%"
      android:duration="5000" >
   </rotate>
   
</set>

<?xml version="1.0" encoding="utf-8"?>

<rotate xmlns:android="http://schemas.android.com/apk/res/android"

android:fromDegrees="0"

android:toDegrees="360"

android:pivotX="50%"

android:pivotY="50%"

android:duration="5000" >

</rotate>

<rotate xmlns:android="http://schemas.android.com/apk/res/android"

android:startOffset="5000"

android:fromDegrees="360"

android:toDegrees="0"

android:pivotX="50%"

android:pivotY="50%"

android:duration="5000" >

</rotate>

</set>

کد فایل res/anim/fade.xml به صورت زیر است:

مثال :

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:anim/accelerate_interpolator" >
   
   <alpha
      android:fromAlpha="0"
      android:toAlpha="1" 
      android:duration="2000" >
   </alpha>
   
   <alpha
      android:startOffset="2000"
      android:fromAlpha="1"
      android:toAlpha="0" 
      android:duration="2000" >
   </alpha>   

</set>

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

android:interpolator="@android:anim/accelerate_interpolator" >

<alpha

android:fromAlpha="0"

android:toAlpha="1"

android:duration="2000" >

</alpha>

<alpha

android:startOffset="2000"

android:fromAlpha="1"

android:toAlpha="0"

android:duration="2000" >

</alpha>

</set>

محتوای فایل res/anim/blink.xml به صورت زیر است:

مثال :

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
   <alpha android:fromAlpha="0.0"
      android:toAlpha="1.0"
      android:interpolator="@android:anim/accelerate_interpolator"
      android:duration="600"
      android:repeatMode="reverse"
      android:repeatCount="infinite"/>
</set>

<?xml version="1.0" encoding="utf-8"?>

<alpha android:fromAlpha="0.0"

android:toAlpha="1.0"

android:interpolator="@android:anim/accelerate_interpolator"

android:duration="600"

android:repeatMode="reverse"

android:repeatCount="infinite"/>

</set>

محتوای فایل res/anim/move.xml به صورت زیر خواهد بود:

مثال :

<?xml version="1.0" encoding="utf-8"?>
<set
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:anim/linear_interpolator"
   android:fillAfter="true">
   
   <translate
      android:fromXDelta="0%p"
      android:toXDelta="75%p"
      android:duration="800" />
</set>

<?xml version="1.0" encoding="utf-8"?>

<set

xmlns:android="http://schemas.android.com/apk/res/android"

android:interpolator="@android:anim/linear_interpolator"

android:fillAfter="true">

<translate

android:fromXDelta="0%p"

android:toXDelta="75%p"

android:duration="800" />

</set>

محتوای فایل res/anim/slide.xml :

مثال :

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   android:fillAfter="true" >
   
   <scale
      android:duration="500"
      android:fromXScale="1.0"
      android:fromYScale="1.0"
      android:interpolator="@android:anim/linear_interpolator"
      android:toXScale="1.0"
      android:toYScale="0.0" />
</set>

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

android:fillAfter="true" >

<scale

android:duration="500"

android:fromXScale="1.0"

android:fromYScale="1.0"

android:interpolator="@android:anim/linear_interpolator"

android:toXScale="1.0"

android:toYScale="0.0" />

</set>

کد ویرایش شده ی فایل res/values/string.xml:

مثال :

<resources>
   <string name="app_name">My Application</string>
</resources>

<string name="app_name">My Application</string>

</resources>

کد پیش فرض فایل AndroidManifest.xml:

مثال :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.Pvlearn.myapplication" >

   <application
      android:allowBackup="true"
      android:icon="@drawable/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
      
      <activity
         android:name="com.example.animation.MainActivity"
         android:label="@string/app_name" >
      
         <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
      
      </activity>
    
   </application>
</manifest>

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.example.Pvlearn.myapplication" >

<application

android:allowBackup="true"

android:icon="@drawable/ic_launcher"

android:label="@string/app_name"

android:theme="@style/AppTheme" >

<activity

android:name="com.example.animation.MainActivity"

android:label="@string/app_name" >

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

اجرای برنامه

برای اجرای برنامه ی اندرویدی خود یکی از فایل های activity در برنامه ی خود کلیک کنید.

سپس روی نماد (Run) از نوار ابزار برای شروع اجرای برنامه کلیک کنید.

سپس نتیجه را به صورت زیر مشاهده خواهید کرد:

Animation در اندروید

روی دکمه ی zoom کلیک کنید تا نتیجه زیر را مشاهده کنید:

Animation در اندروید

روی دکمه ی slide کلیک کنید تا نتیجه ی زیر را مشاهده کنید:

انیمیشن در اندروید -تست-۲

اکنون دکمه ی move را انتخاب کنید تا نتیجه ی زیر را مشاهده کنید:

انیمیشن در اندروید -تست-۳

روی دکمه ی clockwise کلیک کنید تا نتیجه ی زیر را مشاهده کنید:

Animation در اندروید -تست چرخش

حالا روی دکمه ی Fade کلیک کنید تا نتیجه ی محو شدن را ببینید:

Animation در اندروید -تست محو شدگی

نکته: اگر این برنامه را در شبیه ساز اندروید اجرا کنید ممکن است نتیجه ی خوبی نداشته باشید پس بهتر است که آن را در دستگاه واقعی موبایل اجرا کنید.

کلام آخر

یکی از قابلیت های اندروید استدیو پشتیبانی از قابلیت های مختلف انیمیشن است که به کاربر امکان می دهد برای آبجکت های مختلف رفتارهای مشخصی تعریف کند، از این رو مباحث این بخش را به آشنایی با انیمیشن در اندروید اختصاص دادیم.

به اشتراک بگذارید

Animation در اندروید ,انیمیشن Tween

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۲۵ : انیمیشن در اندروید

مقدمه

آشنایی با Animation در اندروید

انیمیشن Tween

مثال

اجرای برنامه

کلام آخر

لیست مطالب دوره

آموزش اندروید

رابط کاربری در اندروید

مفاهیم پیشرفته در اندروید

مثال های مفید

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ