Đặt câu hỏi Viết bài Tạo series
Đăng nhập Đăng ký

Animation Full Life button

Lập trình giao diện Megaman tool với WPF

0.0 (0 đánh giá)
Tạo bởi K9 Cập nhật lần cuối 16:54 15-10-2020 4.439 lượt xem 0 bình luận
Tác giả/Dịch giả: K9
Học nhanh

Danh sách bài học

Animation Full Life button

Nội dung bài viết Học nhanh

Bài trước Bài sau

Dẫn nhập

Megaman X4 là một tựa game rất thú vị gắn bó với mình một thời gian dài qua điện tử bấm, khi mà máy tính hay lập trình còn là gì đó vô cùng xa vời. Mình còn nhớ nguyên mấy tháng mùa hè dí đầu dí cổ vào game để luyện tay qua màn, mãi mà không phá đảo được. Giờ để thử thách bản thân, mình đã tạo ra một giải pháp giúp mình chinh phục "giấc mơ tuổi thơ này". Đó chính là TOOL CHEAT GAME MEGAMAN X4. :v :v :v

Tuy nhiên, trước khi làm tool bạn cần có một giao diện đẹp "kinh khủng khiếp" để có thể xịn xò ngang với game. Chính vì vậy, để bổ trợ cho khóa học CHEAT GAME MEGAMAN X4, đồng thời củng cố khả năng lập trình giao diện với WPF. Kteam sẽ cùng bạn bắt đầu Lập trình giao diện Megaman tool với WPF.

Ở bài trước mình đã hướng dẫn các bạn TẠO ANIMATION CHO "ONE HIT CREEP" BUTTON với Storyboard và Trigger. Ở bài này, Kteam sẽ cùng bạn tạo hiệu ứng cho button Full Life và tối ưu button "One Hit Creep".

Nội dung

Để theo dõi bài này một cách tốt nhất, bạn nên có kiến thức về:

Trong bài này , chúng ta sẽ cùng tìm hiểu các vấn đề:

  • Cách tạo button "One Hit Creep" sử dụng storyboard và trigger.
  • Những điểm khác giữa animation của button "One Hit Creep" và "Create By"
  • Một số lưu ý và kinh nghiệm

Source code tham khảo

App.xaml

<Application x:Class="MegamanUI.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:MegamanUI"
             StartupUri="MainWindow.xaml">
    <Application.Resources>        
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="XamlResources/TriggerRes.xaml"></ResourceDictionary>
                <ResourceDictionary Source="XamlResources/BaseRes.xaml"></ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

App.xaml.cs

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Threading.Tasks;
using System.Windows;

namespace MegamanUI
{
    /// <summary>
    /// Interaction logic for App.xaml
    /// </summary>
    public partial class App : Application
    {
    }
}

MainWindow.xaml

<Window x:Class="MegamanUI.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MegamanUI"
        mc:Ignorable="d"
        WindowStyle="None"
        ResizeMode="CanMinimize"
        WindowStartupLocation="CenterScreen"
        Height="350" Width="550">
    <Window.Background>
        <ImageBrush ImageSource="Images/bg-kteam.png"></ImageBrush>
    </Window.Background>
    <Grid>
        <!--Control bar-->
        <DockPanel PreviewMouseLeftButtonDown="DockPanel_PreviewMouseLeftButtonDown"
                   HorizontalAlignment="Stretch" LastChildFill="False" VerticalAlignment="Top" Background="Transparent" Height="25">
            <Image DockPanel.Dock="Right" Source="Images/x.png"
                   Cursor="Hand"                  
                   PreviewMouseDown="Image_PreviewMouseDown_1"
                   Margin="0 0 15 0">
                <Image.Style>
                    <Style TargetType="Image">
                        <Setter Property="Width" Value="12"></Setter>
                        <Style.Triggers>
                            <Trigger Property="Image.IsMouseOver" Value="True">
                                <Setter Property="Width" Value="15"></Setter>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>
            <Image DockPanel.Dock="Right" Source="Images/-.png" 
                   PreviewMouseDown="Image_PreviewMouseDown"
                   Margin="0 0 10 0" Cursor="Hand">
                <Image.Style>
                    <Style TargetType="Image">
                        <Setter Property="Width" Value="12"></Setter>
                        <Style.Triggers>
                            <Trigger Property="Image.IsMouseOver" Value="True">
                                <Setter Property="Width" Value="15"></Setter>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>
        </DockPanel>
        
        <Image Source="Images/megaman-logo-kteam.png"
               Height="30"
               Margin="28 3 0 0"
               Cursor="Hand"
               HorizontalAlignment="Left" VerticalAlignment="Top"></Image>

        <Image Source="Images/kteam-logo.png"
               Height="30"
               Margin="0 0 40 10"
               Cursor="Hand"
               HorizontalAlignment="Right" VerticalAlignment="Bottom"></Image>

        <!--Injected-->
        <Image Height="220"
               Margin="0 0 40 10"
               Cursor="Hand"
               MouseDown="Image_MouseDown"
                MouseEnter="Image_MouseEnter"
               HorizontalAlignment="Center" VerticalAlignment="Center">
            <Image.Style>
                <Style TargetType="Image">
                    <Setter Property="Source" Value="Images/Megaman-Kteam.png"></Setter>
                    <Style.Triggers>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsInjected}" Value="True"></Condition>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Source" Value="Images/Megaman-Gaea-Armor-Kteam.png"></Setter>
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding IsInjected}" Value="False"></Condition>
                                <Condition Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=IsMouseOver}" Value="True"></Condition>
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Source" Value="Images/Megaman-Gaea-Armor-Kteam.png"></Setter>
                        </MultiDataTrigger>
                    </Style.Triggers>
                </Style>
            </Image.Style>
        </Image>
        
        <!--Created by K9-->
        <TextBlock FontFamily="{StaticResource mainFont}"
                   Foreground="#00FFFF"
                   VerticalAlignment="Bottom"
                   HorizontalAlignment="Center"
                   Margin="0 0 170 5"
                   FontSize="20">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Setter Property="Text" Value="Created by K9"></Setter>
                    <Style.Triggers>
                        <EventTrigger RoutedEvent="Window.Loaded">
                            <BeginStoryboard Storyboard="{StaticResource createStoryStart}"></BeginStoryboard>
                        </EventTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
        
        <!--One hit creep-->
        <Grid HorizontalAlignment="Center" 
               VerticalAlignment="Center"
               Height="90"
              Width="110"
               Cursor="Hand"
               Margin="0 0 280 130"
               MouseDown="Image_MouseDown_OneHitCreep"
                MouseEnter="Image_MouseEnter_OneHitCreep">
            <Image>
                <Image.Style>
                    <Style TargetType="Image">
                        <Setter Property="Source" Value="Images/OneHitCreep/OneHitCreep-kteam.png"></Setter>
                        <Style.Triggers>
                            <MultiDataTrigger>
                                <MultiDataTrigger.Conditions>
                                    <Condition Binding="{Binding IsOneHitCreep}" Value="True"></Condition>
                                </MultiDataTrigger.Conditions>
                                <Setter Property="Source" Value="Images/OneHitCreep/OneHitCreep-Active-kteam.png"></Setter>
                            </MultiDataTrigger>
                            <MultiDataTrigger>
                                <MultiDataTrigger.Conditions>
                                    <Condition Binding="{Binding IsOneHitCreep}" Value="False"></Condition>
                                    <Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=Grid}, Path=IsMouseOver}" Value="True"></Condition>
                                </MultiDataTrigger.Conditions>
                                <Setter Property="Source" Value="Images/OneHitCreep/OneHitCreep-Active-kteam.png"></Setter>
                            </MultiDataTrigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>
            <StackPanel HorizontalAlignment="Center"
                        
                    Width="50"
                    Cursor="Hand"
               Margin="0 0 20 40"
                    VerticalAlignment="Center">
                <TextBlock TextWrapping="Wrap" TextAlignment="Center" FontFamily="{StaticResource mainFont}">
                    <TextBlock.Style>
                        <Style TargetType="TextBlock">
                            <Setter Property="Text" Value="ONE HIT CREEP"></Setter>
                            <Setter Property="Foreground" Value="Gray"></Setter>
                            <Style.Triggers>
                                <MultiDataTrigger>
                                    <MultiDataTrigger.Conditions>
                                        <Condition Binding="{Binding IsOneHitCreep}" Value="False"></Condition>
                                        <Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Grid}, Path=IsMouseOver}" Value="True"></Condition>
                                    </MultiDataTrigger.Conditions>
                                    <Setter Property="Foreground" Value="#00FFFF"></Setter>
                                    <MultiDataTrigger.EnterActions>
                                        <BeginStoryboard Storyboard="{StaticResource oneHitStoryStart}"></BeginStoryboard>
                                    </MultiDataTrigger.EnterActions>
                                </MultiDataTrigger>
                                <MultiDataTrigger>
                                    <MultiDataTrigger.Conditions>
                                        <Condition Binding="{Binding IsOneHitCreep}" Value="True"></Condition>
                                    </MultiDataTrigger.Conditions>
                                    <Setter Property="Foreground" Value="#00FFFF"></Setter>
                                    <MultiDataTrigger.EnterActions>
                                        <BeginStoryboard Storyboard="{StaticResource oneHitStoryStart}"></BeginStoryboard>
                                    </MultiDataTrigger.EnterActions>
                                </MultiDataTrigger>                                
                            </Style.Triggers>
                        </Style>
                    </TextBlock.Style>
                </TextBlock>
            </StackPanel>
        </Grid>

        <!--Full life-->
        <Grid HorizontalAlignment="Center" 
               VerticalAlignment="Center"
               Height="90"
              Width="110"
               Cursor="Hand"
               Margin="0 100 280 0"
               MouseDown="Image_MouseDown_FullLife"
                MouseEnter="Image_MouseEnter_FullLife">
            <Image>
                <Image.Style>
                    <Style TargetType="Image">
                        <Setter Property="Source" Value="Images/FullLife/0%-FullLife-kteam.png"></Setter>
                        <Style.Triggers>
                            <MultiDataTrigger>
                                <MultiDataTrigger.Conditions>
                                    <Condition Binding="{Binding IsFullLife}" Value="False"></Condition>
                                    <Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=Grid}, Path=IsMouseOver}" Value="True"></Condition>
                                </MultiDataTrigger.Conditions>
                                <MultiDataTrigger.EnterActions>
                                    <BeginStoryboard Storyboard="{StaticResource fullLifeImageStoryStart}"></BeginStoryboard>
                                </MultiDataTrigger.EnterActions>
                                <MultiDataTrigger.ExitActions>
                                    <BeginStoryboard Storyboard="{StaticResource fullLifeImageStoryEnd}"></BeginStoryboard>
                                </MultiDataTrigger.ExitActions>
                            </MultiDataTrigger>
                            <MultiDataTrigger>
                                <MultiDataTrigger.Conditions>
                                    <Condition Binding="{Binding IsFullLife}" Value="True"></Condition>
                                </MultiDataTrigger.Conditions>
                                <MultiDataTrigger.EnterActions>
                                    <BeginStoryboard  Storyboard="{StaticResource fullLifeImageStoryStart}"></BeginStoryboard>
                                </MultiDataTrigger.EnterActions>
                                <MultiDataTrigger.ExitActions>
                                    <BeginStoryboard Storyboard="{StaticResource fullLifeImageStoryEnd}"></BeginStoryboard>
                                </MultiDataTrigger.ExitActions>
                            </MultiDataTrigger>                            
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>
            <StackPanel HorizontalAlignment="Center"
                    Width="70"
                    Cursor="Hand"
               Margin="0 0 30 10"
                    VerticalAlignment="Bottom">
                <TextBlock TextWrapping="Wrap" TextAlignment="Center" FontFamily="{StaticResource mainFont}">
                    <TextBlock.Style>
                        <Style TargetType="TextBlock">
                            <Setter Property="Text" Value="FULL LIFE"></Setter>
                            <Setter Property="Foreground" Value="Gray"></Setter>
                            <Style.Triggers>
                                <MultiDataTrigger>
                                    <MultiDataTrigger.Conditions>
                                        <Condition Binding="{Binding IsFullLife}" Value="True"></Condition>
                                    </MultiDataTrigger.Conditions>
                                    <Setter Property="Foreground" Value="#F300C6"></Setter>
                                    <MultiDataTrigger.EnterActions>
                                        <BeginStoryboard Storyboard="{StaticResource fullLifeStoryStart}"></BeginStoryboard>
                                    </MultiDataTrigger.EnterActions>
                                </MultiDataTrigger>
                                <MultiDataTrigger>
                                    <MultiDataTrigger.Conditions>
                                        <Condition Binding="{Binding IsFullLife}" Value="False"></Condition>
                                        <Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Grid}, Path=IsMouseOver}" Value="True"></Condition>
                                    </MultiDataTrigger.Conditions>
                                    <Setter Property="Foreground" Value="#F300C6"></Setter>
                                    <MultiDataTrigger.EnterActions>
                                        <BeginStoryboard Storyboard="{StaticResource fullLifeStoryStart}"></BeginStoryboard>
                                    </MultiDataTrigger.EnterActions>
                                </MultiDataTrigger>
                            </Style.Triggers>
                        </Style>
                    </TextBlock.Style>
                </TextBlock>
            </StackPanel>
        </Grid>
    </Grid>
</Window>

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Media;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace MegamanUI
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window,INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
                handler(this, new PropertyChangedEventArgs(propertyName));
        }

        #region properties
        private bool _IsInjected;
        public bool IsInjected
        {
            get => _IsInjected;
            set
            {
                _IsInjected = value;
                OnPropertyChanged();
            }
        }

        private bool _IsOneHitCreep;
        public bool IsOneHitCreep
        {
            get => _IsOneHitCreep;
            set
            {
                _IsOneHitCreep = value;
                OnPropertyChanged();
            }
        }

        private bool _IsOneHitBoss;
        public bool IsOneHitBoss
        {
            get => _IsOneHitBoss;
            set
            {
                _IsOneHitBoss = value;
                OnPropertyChanged();
            }
        }

        private bool _IsFullLife;
        public bool IsFullLife
        {
            get => _IsFullLife;
            set
            {
                _IsFullLife = value;
                OnPropertyChanged();
            }
        }

        private bool _IsImotal;
        public bool IsImotal
        {
            get => _IsImotal;
            set
            {
                _IsImotal = value;
                OnPropertyChanged();
            }
        }

        SoundPlayer sp_active;
        SoundPlayer sp_hover;
        #endregion

        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = this;

            FirstLoad();
        }

        #region methods
        void FirstLoad()
        {
            IsInjected = false;

            LoadSound();
        }

        void LoadSound()
        {
            sp_active = new SoundPlayer(Properties.Resources.hover_2);
            sp_hover = new SoundPlayer(Properties.Resources.hover);
        }

        void PlaySoundActive()
        {
            sp_active.Play();
        }

        void PlaySoundHover()
        {
            sp_hover.Play();
        }
        #endregion


        #region events
        private void DockPanel_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            base.OnMouseLeftButtonDown(e);
            this.DragMove();
        }

        private void Image_PreviewMouseDown(object sender, MouseButtonEventArgs e)
        {
            WindowState = WindowState.Minimized;
        }

        private void Image_PreviewMouseDown_1(object sender, MouseButtonEventArgs e)
        {
            this.Close();
        }

        private void Image_MouseDown(object sender, MouseButtonEventArgs e)
        {
            IsInjected = !IsInjected;
            PlaySoundActive();
        }

        private void Image_MouseEnter(object sender, MouseEventArgs e)
        {
            if(!IsInjected)
                PlaySoundHover();
        }

        private void Image_MouseDown_OneHitCreep(object sender, MouseButtonEventArgs e)
        {
            IsOneHitCreep = !IsOneHitCreep;
            PlaySoundActive();
        }

        private void Image_MouseEnter_OneHitCreep(object sender, MouseEventArgs e)
        {
            if (!IsOneHitCreep)
                PlaySoundHover();
        }

        private void Image_MouseDown_OneHitBoss(object sender, MouseButtonEventArgs e)
        {
            IsOneHitBoss = !IsOneHitBoss;
            PlaySoundActive();
        }

        private void Image_MouseEnter_OneHitBoss(object sender, MouseEventArgs e)
        {
            if (!IsOneHitBoss)
                PlaySoundHover();
        }

        private void Image_MouseDown_FullLife(object sender, MouseButtonEventArgs e)
        {
            IsFullLife = !IsFullLife;
            PlaySoundActive();
        }

        private void Image_MouseEnter_FullLife(object sender, MouseEventArgs e)
        {
            if (!IsFullLife)
                PlaySoundHover();
        }

        private void Image_MouseDown_Imotal(object sender, MouseButtonEventArgs e)
        {
            IsImotal = !IsImotal;
            PlaySoundActive();
        }

        private void Image_MouseEnter_Imotal(object sender, MouseEventArgs e)
        {
            if (!IsImotal)
                PlaySoundHover();
        }
        #endregion


    }
}

XamlResources/BaseRes.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:MegamanUI.XamlResources">
    <FontFamily x:Key="mainFont">/Megaman UI;component/font/HP-Yard Regular.ttf#HP-Yard</FontFamily>
</ResourceDictionary>

XamlResources/TriggerRes.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:MegamanUI.XamlResources">

    <KeyTime x:Key="frame1">0:0:0.1</KeyTime>
    <KeyTime x:Key="frame2">0:0:0.2</KeyTime>
    <KeyTime x:Key="frame3">0:0:0.3</KeyTime>
    <KeyTime x:Key="frame4">0:0:0.4</KeyTime>
    <KeyTime x:Key="frame5">0:0:0.5</KeyTime>
    <KeyTime x:Key="frame6">0:0:0.6</KeyTime>
    <KeyTime x:Key="frame7">0:0:0.7</KeyTime>
    <KeyTime x:Key="frame8">0:0:0.8</KeyTime>
    <KeyTime x:Key="frame9">0:0:0.9</KeyTime>
    <KeyTime x:Key="frame10">0:0:1</KeyTime>
    <KeyTime x:Key="frame11">0:0:1.1</KeyTime>
    <KeyTime x:Key="frame12">0:0:1.2</KeyTime>
    <KeyTime x:Key="frame13">0:0:1.3</KeyTime>
    <KeyTime x:Key="frame14">0:0:1.4</KeyTime>
    <KeyTime x:Key="frame15">0:0:1.5</KeyTime>
    <KeyTime x:Key="frame16">0:0:1.6</KeyTime>
    <KeyTime x:Key="frame2s">0:0:2</KeyTime>
    
    <Storyboard x:Key="createStoryStart" Storyboard.TargetProperty="(TextBlock.Text)">
        <StringAnimationUsingKeyFrames RepeatBehavior="Forever">
            <DiscreteStringKeyFrame Value="C" KeyTime="{StaticResource frame1}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="Cr" KeyTime="{StaticResource frame2}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="Cre" KeyTime="{StaticResource frame3}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="Crea" KeyTime="{StaticResource frame4}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="Creat" KeyTime="{StaticResource frame5}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="Create" KeyTime="{StaticResource frame6}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="Created" KeyTime="{StaticResource frame7}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="Created " KeyTime="{StaticResource frame8}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="Created b" KeyTime="{StaticResource frame9}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="Created by" KeyTime="{StaticResource frame10}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="Created by " KeyTime="{StaticResource frame11}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="Created by K" KeyTime="{StaticResource frame12}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="Created by K9" KeyTime="{StaticResource frame13}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="Created by K9" KeyTime="{StaticResource frame2s}"></DiscreteStringKeyFrame>
        </StringAnimationUsingKeyFrames>
    </Storyboard>

    <Storyboard x:Key="oneHitStoryStart" Storyboard.TargetProperty="(TextBlock.Text)">
        <StringAnimationUsingKeyFrames>
            <DiscreteStringKeyFrame Value="O" KeyTime="{StaticResource frame1}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="ON" KeyTime="{StaticResource frame2}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="ONE" KeyTime="{StaticResource frame3}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="ONE " KeyTime="{StaticResource frame4}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="ONE H" KeyTime="{StaticResource frame5}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="ONE HI" KeyTime="{StaticResource frame6}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="ONE HIT" KeyTime="{StaticResource frame7}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="ONE HIT " KeyTime="{StaticResource frame8}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="ONE HIT C" KeyTime="{StaticResource frame9}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="ONE HIT CR" KeyTime="{StaticResource frame10}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="ONE HIT CRE" KeyTime="{StaticResource frame11}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="ONE HIT CREE" KeyTime="{StaticResource frame12}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="ONE HIT CREEP" KeyTime="{StaticResource frame13}"></DiscreteStringKeyFrame>
        </StringAnimationUsingKeyFrames>
    </Storyboard>

    <Storyboard x:Key="fullLifeStoryStart" Storyboard.TargetProperty="(TextBlock.Text)">
        <StringAnimationUsingKeyFrames>
            <DiscreteStringKeyFrame Value="F" KeyTime="{StaticResource frame1}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="FU" KeyTime="{StaticResource frame2}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="FUL" KeyTime="{StaticResource frame3}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="FULL" KeyTime="{StaticResource frame4}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="FULL " KeyTime="{StaticResource frame5}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="FULL L" KeyTime="{StaticResource frame6}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="FULL LI" KeyTime="{StaticResource frame7}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="FULL LIF" KeyTime="{StaticResource frame8}"></DiscreteStringKeyFrame>
            <DiscreteStringKeyFrame Value="FULL LIFE" KeyTime="{StaticResource frame9}"></DiscreteStringKeyFrame>
        </StringAnimationUsingKeyFrames>
    </Storyboard>

    <Storyboard x:Key="fullLifeImageStoryStart" Storyboard.TargetProperty="(Image.Source)">
        <ObjectAnimationUsingKeyFrames>
            <DiscreteObjectKeyFrame KeyTime="{StaticResource frame1}">
                <DiscreteObjectKeyFrame.Value>
                    <BitmapImage UriSource="../Images/FullLife/40%-FullLife-kteam.png"></BitmapImage>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
            <DiscreteObjectKeyFrame KeyTime="{StaticResource frame2}">
                <DiscreteObjectKeyFrame.Value>
                    <BitmapImage UriSource="../Images/FullLife/50%-FullLife-kteam.png"></BitmapImage>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
            <DiscreteObjectKeyFrame KeyTime="{StaticResource frame3}">
                <DiscreteObjectKeyFrame.Value>
                    <BitmapImage UriSource="../Images/FullLife/60%-FullLife-kteam.png"></BitmapImage>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
            <DiscreteObjectKeyFrame KeyTime="{StaticResource frame4}">
                <DiscreteObjectKeyFrame.Value>
                    <BitmapImage UriSource="../Images/FullLife/70%-FullLife-kteam.png"></BitmapImage>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
            <DiscreteObjectKeyFrame KeyTime="{StaticResource frame5}">
                <DiscreteObjectKeyFrame.Value>
                    <BitmapImage UriSource="../Images/FullLife/80%-FullLife-kteam.png"></BitmapImage>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
            <DiscreteObjectKeyFrame KeyTime="{StaticResource frame6}">
                <DiscreteObjectKeyFrame.Value>
                    <BitmapImage UriSource="../Images/FullLife/90%-FullLife-kteam.png"></BitmapImage>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
            <DiscreteObjectKeyFrame KeyTime="{StaticResource frame7}">
                <DiscreteObjectKeyFrame.Value>
                    <BitmapImage UriSource="../Images/FullLife/100%-FullLife-kteam.png"></BitmapImage>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="fullLifeImageStoryEnd" Storyboard.TargetProperty="(Image.Source)">
        <ObjectAnimationUsingKeyFrames>
            <DiscreteObjectKeyFrame KeyTime="{StaticResource frame8}">
                <DiscreteObjectKeyFrame.Value>
                    <BitmapImage UriSource="../Images/FullLife/0%-FullLife-kteam.png"></BitmapImage>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
            <DiscreteObjectKeyFrame KeyTime="{StaticResource frame7}">
                <DiscreteObjectKeyFrame.Value>
                    <BitmapImage UriSource="../Images/FullLife/40%-FullLife-kteam.png"></BitmapImage>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
            <DiscreteObjectKeyFrame KeyTime="{StaticResource frame6}">
                <DiscreteObjectKeyFrame.Value>
                    <BitmapImage UriSource="../Images/FullLife/50%-FullLife-kteam.png"></BitmapImage>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
            <DiscreteObjectKeyFrame KeyTime="{StaticResource frame5}">
                <DiscreteObjectKeyFrame.Value>
                    <BitmapImage UriSource="../Images/FullLife/60%-FullLife-kteam.png"></BitmapImage>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
            <DiscreteObjectKeyFrame KeyTime="{StaticResource frame4}">
                <DiscreteObjectKeyFrame.Value>
                    <BitmapImage UriSource="../Images/FullLife/70%-FullLife-kteam.png"></BitmapImage>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
            <DiscreteObjectKeyFrame KeyTime="{StaticResource frame3}">
                <DiscreteObjectKeyFrame.Value>
                    <BitmapImage UriSource="../Images/FullLife/80%-FullLife-kteam.png"></BitmapImage>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
            <DiscreteObjectKeyFrame KeyTime="{StaticResource frame2}">
                <DiscreteObjectKeyFrame.Value>
                    <BitmapImage UriSource="../Images/FullLife/90%-FullLife-kteam.png"></BitmapImage>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>            
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</ResourceDictionary>

Assest file

Nhằm giúp bạn có thể trải nghiệm hiệu ứng tool một cách tốt nhất, và chủ động trong việc sử dụng source. Kteam hỗ trợ full source code và các file liên quan tại phần ASSEST bên dưới nhé

Trong file này có gì???

  • Đầu tiên bạn sẽ có 1 file chứa assest gồm âm thanh, font, hình ảnh và icon. 
  • Tiếp theo là File build hoàn chỉnh để bạn dễ dàng tham khảo các hiệu ứng.
  • Project hoàn chỉnh để tham khảo
  • Một file game exe dành cho bạn nào chưa từng chơi game megaman có thể thử qua để thêm hứng thú.

Kết luận

Qua bài học này, bạn đã nắm được cách tạo animation cho Button Full Life, tối ưu button One Hit Creep, debug và fix bug 

Trong bài sau, mình sẽ hướng dẫn các bạn TẠO BUTTON ONE HIT BOSS.

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. Đừng quên “Luyện tập – Thử thách – Không ngại khó”.

Tải xuống

Tài liệu

Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Animation Full Life button dưới dạng file PDF trong link bên dưới.

Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com

Đừng quên like và share để ủng hộ Kteam và tác giả nhé!

Project

Nếu việc thực hành theo hướng dẫn không diễn ra suôn sẻ như mong muốn. Bạn cũng có thể tải xuống PROJECT THAM KHẢO ở link bên dưới!

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.

CỘNG ĐỒNG HỎI ĐÁP HOWKTEAM.COM
GROUP THẢO LUẬN FACEBOOK

Nội dung bài viết

Tác giả/Dịch giả

K9

Nhà sáng lập Howkteam.com, KQuiz.vn & tác giả các khóa học C#, Auto, Unity3D, Python....

Với mong muốn mang đến kiến thức chất lượng, miễn phí cho mọi người, với tâm huyết phá bỏ rào cản kiến thức từ việc giáo dục thu phí. Tôi đã cùng đội ngũ Kteam đã lập nên trang website này để thế giới phẳng hơn.
Hãy cùng chúng tôi lan tỏa kiến thức đến cộng đồng! 

Khóa học

Lập trình giao diện Megaman tool với WPF

Megaman X4 là một tựa game rất thú vị gắn bó với mình một thời gian dài qua điện tử bấm, khi mà máy tính hay lập trình còn là gì đó vô cùng xa vời. Mình còn nhớ nguyên mấy tháng mùa hè dí đầu dí cổ vào game để luyện tay qua màn, mãi mà không phá đảo được. Giờ để thử thách bản thân, mình đã tạo ra một giải pháp giúp mình chinh phục "giấc mơ tuổi thơ này". Đó chính là TOOL CHEAT GAME MEGAMAN X4. :v :v :v

Tuy nhiên, trước khi làm tool bạn cần có một giao diện đẹp "kinh khủng khiếp" để có thể xịn xò ngang với game. Chính vì vậy, để bổ trợ cho khóa học CHEAT GAME MEGAMAN X4, đồng thời củng cố khả năng lập trình giao diện với WPF. Kteam sẽ cùng bạn bắt đầu Lập trình giao diện Megaman tool với WPF.

Nào! Cùng bắt đầu thôi.

Đánh giá

Bình luận

Để bình luận, bạn cần đăng nhập bằng tài khoản Howkteam.

Đăng nhập
Không có video.
Quan tâm
Tag theo dõi