ანიმაციები

ანიმაციების საშუალებით შეგვიძლია ვებგვერდი უფრო ლამაზი და საინტერესო გავხადოთ.

რა არის CSS ანიმაცია?

CSS ანიმაცია გვაძლევს საშუალებას, ელემენტის სტილები ვცვალოთ დროთა განმავლობაში. ეს შეიძლება იყოს ფერის, ელემენტის პოზიციის ან სხვა ნებისმიერი CSS სტილიზაციის ცვლილება.

როგორ შევქმნათ ანიმაცია?

1. მივანიჭოთ ელემენტს ანიმაციის სახელი.
2. მივანიჭოთ სხვადასხვა ანიმაციის თვისებები (რა დროში შესრულდეს, როგორ შესრულდეს და ა.შ).
3. აღვწეროთ ანიმაციის შესრულების პროცესი, დასაწყისიდან დასასრულამდე.

მაგალითისთვის, შევქმნათ სპინერის (ჩატვირთვის) ანიმაცია.

პირველ რიგში საჭიროა ელემენტის შექმნა.

<div class="spinner" role="status"></div>

div.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #1890ff;
  border-top-color: transparent;
  border-radius: 50%;
}

მივიღეთ ელემენტის ჩარჩო, რომელზეც შეგვიძლია მოვარგოთ ანიმაცია.

გავუწეროთ ანიმაციის სახელიც:

div.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #1890ff;
  border-top-color: transparent;
  border-radius: 50%;
  animation-name: spinner;
}

animation-name-ის გამოყენებით ელემენტს მივანიჭეთ ანიმაცის სახელი. ახლა საჭიროა ამ სახელით ანიმაციის შესრულების ინსტრუქციების აღწერა.

ანიმაციის შესრულების სტილების აღსაწერად გამოიყენება @keyframes. მასში შეგვიძლია ორნაირად ჩავწეროთ მნიშვნელობები:

1. from და to: ანიმაციის დასაწყისი (0%) და ანიმაციის დასასრული (100%).
2. პროცენტული მახასიათებელი რამდენიც გვსურს 0-დან 100-ის ჩათვლით.

@keyframes spinner {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}

rotate არის CSS-ის თვისება, რომელიც განსაზღვრავს თუ როგორ დაიხაროს ელემენტი. ასევე შეიძლება transform: rotate() ფუქნციის გამოყენება.

ჩვენ ანიმაციას უკვე აქვს სახელიც და შესასრულებელი სტილებიც, თუმცა ანიმაციის გასაშვებად საჭიროა ანიმაციის დრო. animation-duration.

მას შეიძლება მნიშვნელობა მივანიჭოთ s (წამებში) ან ms (მილიწამებში) დროის ერთეულებში.

<div class="spinner" role="status"></div>

div.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #1890ff;
  border-top-color: transparent;
  border-radius: 50%;
  animation-name: spinner;
  animation-duration: 10s;
}

@keyframes spinner {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}

ჩვენს შემთხვევაში, ანიმაცია შესრულდება მხოლოდ 10 წამი და ამის შემდეგ გაჩერდება.

ანიმაციის თვისებები

CSS-ში ასევე გვაქვს სხვადასხვა ანიმაციის თვისებები, რომლებიც დაგეხმარებათ ლამაზი ანიმაციების შექმნაში.

animation-iteration-count

animation-iteration-count განსაზღვრავს თუ რამდენჯერ უნდა განმეორდეს ანიმაცია.

თვისებას შეიძლება მივანიჭოთ ნებისმიერი დადებითი რიცხვი ან infinite (უსასრულოდ შესრულებისთვის).

animation-delay

animation-delay განსაზღრავს თუ რა დროის შემდეგ დაიწყება ანიმაცია, ერთგვარი დაგვიანების დრო.

თვისებას შეიძლება მივანიჭოთ დროის მნიშვნელობები (s ან ms).

animation-direction

animation-direction განსაზღრავს თუ რა მიმართლებით დაიწყოს ანიმაცია.

თვისებას შეიძლება მივანიჭოთ ოთხი მნიშვნელობა:

• normal - სტანდარტული მნიშვნელობა (from-იდან to-მდე).
• reverse - სტანდარტულის შებრუნებული მნიშვნელობა (to-დან from-მდე).
• alternate - იწყება სტანდარტული ციკლით (from-იდან to-მდე) შემდეგ კი იცვლება (to-იდან from-მდე) და ასე გრძელდება მონაცვლეობით.
• alternate-reverse - ჰგავს alternate-ს, ოღონდ შებრუნებული თანმიმდევრობით.

animation-timing-function

animation-timing-function განსაზღრავს თუ როგორ უნდა შესრულდება ანიმაცია შესრულებული ციკლის დროს - კერძოდ დამოკიდებულებას ანიმაციის ეტაპებსა და ანიმაციის დროს შორის.

თვისებას შეიძლება მივანიჭოთ cubic-bezier-ის მნიშვნელობა cubic-bazier არის ფუნქცია, რომელიც გაძლევს საშუალებას განსაზღვრო ანიმაციის სიჩქარის ცვლილება ზუსტად ისეთი ფორმით, როგორიც შენ გინდა. ეს ფუნქცია მუშაობს Bazier curve-ის საფუძველზე. ის ასევე გამოიყენება გრაფიკულ დიზაინში მრუდების დასახატად.

cubic-bazier-ის ფუნქციის ჩასაწერად გამოიყენება შემდეგი ფორმულა:

.some_random_element {
  animation-timing-function: cubic-bazier(x1, y1, x2, y2);
}

• x1 - რიცხვითი მნიშვნელობა, პირველი წერტილის X კორდინატი, მნიშვნელობა შეიძლება ჩაიწეროს 0-დან 1-ის ჩათვლით ([0, 1]).
• y1 - რიცხვითი მნიშვნელობა, პირველი წერტილის Y კორდინატი, მნიშვნელობა შეიძლება ჩაიწეროს 0-დან 1-ის ჩათვლით ([0, 1]).
• x2 - რიცხვითი მნიშვნელობა, მეორე წერტილის X კორდინატი, მნიშვნელობა შეიძლება ჩაიწეროს 0-დან 1-ის ჩათვლით ([0, 1]).
• y2 - რიცხვითი მნიშვნელობა, მეორე წერტილის Y კორდინატი, მნიშვნელობა შეიძლება ჩაიწეროს 0-დან 1-ის ჩათვლით ([0, 1]).

CSS-ში გვაქვს რამოდენიმე cubic-bazier-ის რამდენიმე წინასწარ გაწერილი ფუნქცია:

შემოკლებული ჩაწერა

როგორც ბევრი სხვა CSS-ის თვისება, შეგვიძლია ანიმაციის თვისებებიც ერთი თვისებაში გავაერთიანოთ:

.some_random_element {
  animation: duration timing-function delay iteration-count direction name;
}

ანიმაციის მაგალითი

დავასრულოთ დაწყებული სპინერის მაგალითი, ახლად შესწავლილი თვისებების გამოყენებით:

<div class="spinner" role="status"></div>
<div class="spinner reversed" role="status"></div>

div.spinner {
  width: 50px;
  height: 50px;
  display: inline-block;
  border: 5px solid #1890ff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: 2s linear infinite spinner;
}

div.spinner.reversed {
  margin-left: 15px;
  animation-direction: reverse;
}

@keyframes spinner {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}

შეჯამება

ამ სტატიაში განვიხილეთ CSS ანიმაციების ძირითადი პრინციპები.