【組件】css - doodle

官網 https://css-doodle.com/
github https://github.com/css-doodle/css-doodle

• 原理： 基于 Shadow DOM v1和 Custom Elements v1（自定義標簽）

• Shadow DOM是HTML的一個規(guī)范 ，它允許瀏覽器開發(fā)者封裝自己的HTML標簽、CSS樣式和特定的javascript代碼，同時也可以讓開發(fā)人員創(chuàng)建類似<video>這樣的自定義一級標簽

• 該組件通過其內部的規(guī)則（純CSS）會生成一系列的div構建的CSS Grid。你可以使用CSS輕松地操作這些div（單元格，每個div就是一個單元格）來生成圖案。生成的圖案既可以是靜態(tài)的，也可以是動態(tài)的。而其限制僅限于CSS本身的限制。

使用

1. 效果不佳！

<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.5.1/css-doodle.min.js"></script>

<css-doodle>
  /* put your code here */
</css-doodle>

<script src="https://unpkg.com/css-doodle@0.5.1/css-doodle.min.js"></script>

3 npm

npm install css-doodle

/* import it */
import 'css-doodle';

api

• 了解官網api

api

方法

• 可以返回當前格子數(shù) index({ count }) {
• 當前行數(shù) row({ x }) {
• 當前列數(shù) col({ y }) {
• 總共格子樹 size({ grid }) {
• 總行數(shù) ['size-row']({ grid }) {
• 總列數(shù) ['size-col']({ grid }) {
• 隨機從數(shù)組中選擇一個值 pick({ context }) {
• 從數(shù)組中按順序選擇 ['pick-n']({ idx, context, position }) {
• 從數(shù)組隨機排列 然后 順序顯示 ['pick-d']({ idx, context, position }) {
• 最后一個被選擇的數(shù) ['last-pick']({ context }) {
• 創(chuàng)建多個 multiple: lazy((n, action) => {
• 重復 repeat: lazy((n, action) => {
• 從范圍中 隨機取數(shù) rand({ context }) {
• 最后一個隨機數(shù) ['last-rand']({ context }) {
• 把 hex 碼轉換成字符 hex() {

一些方法可以簡寫

 var Func = alias_for(Expose, {
    'multi': 'multiple',
    'm':     'multiple',
    'pn':    'pick-n',
    'pd':    'pick-d',
    'r':     'rand',
    'p':     'pick',
    'lp':    'last-pick',
    'lr':    'last-rand',
    'i':     'index',

    // legacy names
    'pick-by-turn': 'pick-n',
    'max-row': 'size-row',
    'max-col': 'size-col'
  });

栗子

至于栗子 參照 官網 https://css-doodle.com/ 以及更多栗子
袁川大大的演講【筆記】

舉個官網的栗子看圖！

image.png

代碼如下

:doodle {   
  @grid: 50x1 / 80%;
}

@place-cell: center;
@size: calc(100% / @size() * @i());

transition: transform .2s ease;
transform: rotate(calc(@i() * 5deg));

border-radius: 30%;
border: 1px solid hsla(
  calc(10 + 4 * @i()), 70%, 68%, @r(.8)
);
    

代碼比較簡短
了解部分的意思

• :doodle 選擇css-doodle元素本身
• @grid 設置布局 即 50*1 代表 50個格子 在一個位置
• @place-cell 給元素定位
• @size 設置寬高
• @i 當前格子的index
• @r 隨機一個數(shù) @(.8) 即為 0-0.8 的任意一個數(shù)

再隨意加點動畫

will-change: transform, opacity;
    animation: scale-up 12s linear infinite;
    animation-delay: calc(-12s / @size() * @i());
    @keyframes scale-up {
      0%{
            transition: transform .2s ease;
        transform: rotate(calc(@i() * 45deg));
        opacity: 0;
      }
       100% {
        opacity: 1;
      }
    }

結尾

有時間回來截動圖，可到官網上 把上下代碼連接到一起，然后查看效果！ 隨意改點數(shù)字，然后就會發(fā)現(xiàn)停不下來了~

PS：部分函數(shù)源碼

// 可以返回當前格子數(shù)
    index({ count }) {
      return _ => count;
    },
//  當前行數(shù)
    row({ x }) {
      return _ => x;
    },
//當前列數(shù)
    col({ y }) {
      return _ => y;
    },
// 總共格子樹
    size({ grid }) {
      return _ => grid.count;
    },
//總行數(shù)
    ['size-row']({ grid }) {
      return _ => grid.x;
    },
// 總列數(shù)
    ['size-col']({ grid }) {
      return _ => grid.y;
    },
// 
    n({ idx }) {
      return _ => idx || 0;
    },
// 隨機從數(shù)組中選擇一個值
    pick({ context }) {
      return expand((...args) => (
        context.last_pick = pick(args)
      ));
    },
// 從數(shù)組中按順序選擇
    ['pick-n']({ idx, context, position }) {
      let counter = 'pn-counter' + position;
      return expand((...args) => {
        if (!context[counter]) context[counter] = 0;
        context[counter] += 1;
        let max = args.length;
        let pos = ((idx == undefined ? context[counter] : idx) - 1) % max;
        return context.last_pick = args[pos];
      });
    },
// 從數(shù)組隨機排列 然后 順序顯示
    ['pick-d']({ idx, context, position }) {
      let counter = 'pd-counter' + position;
      let values = 'pd-values' + position;
      return expand((...args) => {
        if (!context[counter]) context[counter] = 0;
        context[counter] += 1;
        if (!context[values]) {
          context[values] = shuffle(args);
        }
        let max = args.length;
        let pos = ((idx == undefined ? context[counter] : idx) - 1) % max;
        return context.last_pick = context[values][pos];
      });
    },
// 最后一個被選擇的數(shù)
    ['last-pick']({ context }) {
      return () => context.last_pick;
    },

    multiple: lazy((n, action) => {
      let result = [];
      if (!action || !n) return result;
      let count = clamp(n(), 1, 65536);
      for (let i = 0; i < count; ++i) {
        result.push(action(i + 1));
      }
      return result.join(',');
    }),
// 重復
    repeat: lazy((n, action) => {
      let result = '';
      if (!action || !n) return result;
      let count = clamp(n(), 1, 65536);
      for (let i = 0; i < count; ++i) {
        result += action(i + 1);
      }
      return result;
    }),
//  從范圍中 隨機取數(shù)
    rand({ context }) {
      return (...args) => {
        let transform_type = args.every(is_letter)
          ? by_charcode
          : by_unit;
        let value = transform_type(rand).apply(null, args);
        return context.last_rand = value;
      };
    },
//  最后一個隨機數(shù)
    ['last-rand']({ context }) {
      return () => context.last_rand;
    },